Vuetify vite v-img is not found (error 404) when image is stored locally

Question

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.

Check my answer in this post: stackoverflow.com/questions/75503353/… — huan feng
– huan feng, Commented Mar 7, 2023 at 6:15

quilkin · Accepted Answer · 2023-03-06 20:31:57Z

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

Collectives™ on Stack Overflow

Vuetify vite v-img is not found (error 404) when image is stored locally

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related