Image not showing with Vue

Question

I am trying to import an image file from a parent folder in the public/images folder to a component (Categories.vue), but the image is not showing up.

This is the folder structure:

folder structure

And this is the code:

<template>
  <div class="container">
      <div class="row">
          <div v-for="item in items" :key="item.name" class="col-lg-3 col-md-3">
              <div class="img-container">
                  <img v-bind:src="item.src" alt="" class="img-fluid">
                  <p class="text-dark"> {{ item.subtitle }} </p>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {   
          name:'first', 
          src:'./public/images/anubis.png', 
          subtitle: 'Anubis' 
        },
        { 
          name:'second', 
          src:'public/images/sarcophagus.png', 
          subtitle: 'Sarcophagus' 
        },
        { 
          name:'third', 
          src:'public/images/ra.png', 
          subtitle: 'Ra' 
        },
        { 
          name:'fourth', 
          src:'public/images/eye-of-ra.png', 
          subtitle: 'Eyes of Ra' 
        }
      ]
    }
  }
}
</script>

I am pretty sure that I did everything right. I tried using require(), but also failed. How can I fix this problem?

You can easly find solution to this on stackoverflow, just spend 5 min looking for it.... https://stackoverflow.com/questions/54728285/how-to-make-vue-display-an-image-from-a-local-path-from-json-file/54731730#54731730 — Adam Orłowski, Jul 19 '19 at 09:44

score 1 · Answer 1 · answered May 01 '20 at 00:39

1

All you need to do is replace your variable

src:'./public/images/anubis.png'

with

src:'/images/anubis.png',

This would automatically link to your public folder in all instances.

answered May 01 '20 at 00:39

Jaxen Visuals

29
1
4

score 0 · Answer 2 · answered Jul 19 '19 at 11:34

You need to serve static assets from src/assets folder so that webpack can see the images, so you need to put images folder inside src/assets after that you can do like;

<template>
 <div v-for="(image, index) in images" :key='index'>
   <img :src='require(`@/assets/${image.src}`)' />
   <p class="text-dark"> {{ image.subtitle }} </p>
 </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      images: [
        { 
          name:'second', 
          src:'images/sarcophagus.png', 
          subtitle: 'Sarcophagus' 
        },
        { 
          name:'third', 
          src:'images/ra.png', 
          subtitle: 'Ra' 
        }
      ]
    }
  }
</script>

score 0 · Answer 3 · answered Jul 20 '19 at 08:24

The problem is your src URLs are incorrectly prefixed with public/. For URLs based in the public directory, the prefix should actually be the public path, found in process.env.BASE_URL (equals / by default):

export default {
  data() {
    return {
      items: [
        {
          src: `${process.env.BASE_URL}images/anubis.png`,
        },
        {
          src: `${process.env.BASE_URL}images/sarcophagus.png`,
        },
        {
          src: `${process.env.BASE_URL}images/ra.png`,
        },
        {
          src: `${process.env.BASE_URL}images/eye-of-ra.png`,
        }
      ]
    }
  }
}

demo 1

Note the public directory is provided as a last resort. The Vue docs recommend putting assets under src/assets for optimal builds (i.e., only referenced images would be minified and included in the build). Assuming you used src/assets/images to contain your images, the src URLs would be:

export default {
  data() {
    return {
      items: [
        {
          src: require('@/assets/images/anubis.png'),
        },
        {
          src: require('@/assets/images/sarcophagus.png'),
        },
        {
          src: require('@/assets/images/ra.png'),
        },
        {
          src: require('@/assets/images/eye-of-ra.png'),
        }
      ]
    }
  }
}

demo 2

Image not showing with Vue

3 Answers3