Nuxt: displaying local image from static folder

Question

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?

ryeMoss · Accepted Answer · 2019-01-04 00:20:31Z

22

You don't need to specify the static folder, you should simply do:

  src: '/52lv.PNG'

edited Jan 4, 2019 at 0:20

answered Jan 3, 2019 at 17:54

ryeMoss

4,3631 gold badge19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Non404 · Accepted Answer · 2020-09-09 14:06:01Z

3

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"/>

edited Sep 9, 2020 at 14:06

answered Sep 7, 2020 at 6:11

Non404

1,3033 gold badges19 silver badges28 bronze badges

1 Comment

adelriosantiago Over a year ago

Alternative you can just <img :src="require(`~/assets/img/${image}.jpg`)" /> as shown in the documentation

Collectives™ on Stack Overflow

Nuxt: displaying local image from static folder

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related