0

I am attempting to load an image into a element but it is only found if the inage is stred at a remote URL, not if it is part of the local file system.

<script setup>
var botright_local = './assets/images/bottomright.jpg'
var botright_web = 'https://quilkin.co.uk/img/bottomright.jpg'
</script>   

<template>
  <header>
    <img src="./assets/images/bottomright.jpg" width="125" height="125" />
  </header>
  <main >
    <v-img :src="botright_local"  width="125" height="125"   />
    <v-img :src="botright_web"  width="125" height="125"   />
  </main>
</template>

The first image (a standard <img> loads OK locally; the second ( a<v-img>) gives a 404 error; the third loads OK.

Searches for this error suggest that that I should use require([path_toimage]) but it appears that require is not for use in the vite environment.

quilkin
  • 874
  • 11
  • 31
  • Check my answer in this post: https://stackoverflow.com/questions/75503353/v-img-cant-locate-resource-from-assets-folder/75505467?noredirect=1#comment133226563_75505467 – huan feng Mar 07 '23 at 06:15

1 Answers1

0

For the Vite environemnt, the solution is to use new URL('[path_to_image]', import.meta.url).href

e.g.

<script setup>

const botright_vite = new URL('./assets/images/bottomleft.jpg', import.meta.url).href
var botright_web = 'https://quilkin.co.uk/img/bottomright.jpg'
</script>

<template>
  <main >
    <v-img :src="botright_web"  width="125" height="125"   />
    <v-img :src="botright_vite"  width="125" height="125"   />
  </main>
</template>

see here for more details

quilkin
  • 874
  • 11
  • 31