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.... stackoverflow.com/questions/54728285/… — Adam Orłowski
– Adam Orłowski, Commented Jul 19, 2019 at 9:44

Jaxen Visuals · Accepted Answer · 2020-05-01 00:39:45Z

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.

onuriltan · Accepted Answer · 2019-07-19 11:34:23Z

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>

tony19 · Accepted Answer · 2019-07-20 08:24:37Z

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

Collectives™ on Stack Overflow

Image not showing with Vue

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related