How do I reference an image path in an img src in Vue JS

Question

I have an array of objects coming from a prop. Each object has a title and img key values. I'm using v-for to display the title and how the image from the img value.

    <div v-for="item in products" :key="item.id">
      <h1>{{item title}}</h1>
      <img :src="item.img">
    </div>

    export default {
      name: "home",
      props: ["products"]
      /*
      here is the products
      [{id: 1, title: "Moe", img: "../assets/images/stooges/moe.jpg"},
      {id: 2, title: "Larry", img: "../assets/images/stooges/larry.jpg"},
      {id: 3, title: "Curly", img: "@/assets/images/stooges/curly.jpg"}]
      */
    };

On the last element, I'm trying the relative referencing. I've also tried something like this

<img :src="require(item.img)">

At least for the last element, I was hoping to see the image.

I've checking on my prompt using vue --version. I'm using @vue/cli 4.1.1 @Michal Levý — Jun Dolor, Dec 23 '19 at 15:27
@ T. Short my root directory has the following folders: node_modules, public, src — Jun Dolor, Dec 23 '19 at 15:28
If your images are in `src/assets/images/stooges/` folder `"@/assets/images/stooges/curly.jpg"` should work (and works for me) — Michal Levý, Dec 23 '19 at 15:31
Do you see the titles and not images or nothing is rendered at all ? — Michal Levý, Dec 23 '19 at 15:32
@Michal Levý If I hard code the image url like this, , the image appears. But in variables coming from the v-for loop, the image does not appear — Jun Dolor, Dec 23 '19 at 15:47
still didn't work. I'm getting "Error: Cannot find module './assets/images/stooges/moe.jpg'". My first object is {id: 1, title: "Moe", img: "../assets/images/stooges/moe.jpg"}. I also tried removing the double dots, using @ with no success — Jun Dolor, Dec 23 '19 at 16:27

score 4 · Answer 1 · answered Dec 23 '19 at 17:39

4

    <div v-for="item in products" :key="item.id">
      <h1>{{ item.title }}</h1>
      <img :src="require(`@/assets/images/stooges/${item.img}.jpg`)" />
    </div>

    export default {
      name: "home",
      props: ["products"]
      data() {
        return {
          products: [
            [{id: 1, title: "Moe", img: "moe"},
             {id: 2, title: "Larry", img: "larry"},
             {id: 3, title: "Curly", img: "curly"}]
          ]
        };
      },
    };

answered Dec 23 '19 at 17:39

larrykkk

459
8
10

Perfect! I am now able to see the images. Much obliged :-) – Jun Dolor Dec 23 '19 at 17:53
I have got `ReferenceError: require is not defined` error. – Tibor Takács Dec 08 '22 at 21:12

How do I reference an image path in an img src in Vue JS

1 Answers1