Nuxt: displaying local image from static folder
16,638
Solution 1
You don't need to specify the static folder, you should simply do:
src: '/52lv.PNG'
Solution 2
In addition to this question, if we would have it in '~assets/images/521v.PNG' ?
Instead of doing this
export default { data () {
return {
items: [
{
src: '/static/52lv.PNG'
},
Do this
src: `${require(`~assets/images/521v.PNG`)}`
and you would use it like this:
<img :src="items.src"/>
Author by
user1592380
Updated on June 04, 2022Comments
-
user1592380 almost 2 years
I'm getting started with nuxt. My static folder is in the screenshot. I've been trying to follow https://nuxtjs.org/guide/assets/#static
I've got a vuetify carousel component that was working fine with urls as the src. Now I want to try to serve local static files. I tried:
<template> <v-carousel> <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item> </v-carousel> </template> <script> export default { data () { return { items: [ { src: '/static/52lv.PNG' }, { src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg' }, { src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg' }, { src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg' } ] } } } </script>
but now when I run the dev server I get a blank screen for that image of the carousel . The other images with urls work fine.
Inspecting the blank element in the browser, I see:
How can I display this image?
-
adelriosantiago over 3 yearsAlternative you can just
<img :src="require(`~/assets/img/${image}.jpg`)" />
as shown in the documentation