如何在 Vue JS 的 img src 中引用图像路径答案

【问题标题】：How do I reference an image path in an img src in Vue JS如何在 Vue JS 的 img src 中引用图像路径
【发布时间】：2020-04-14 20:57:37
【问题描述】：

我有一个来自道具的对象数组。每个对象都有一个 title 和 img 键值。我正在使用 v-for 来显示标题以及图像如何来自 img 值。

    <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"}]
      */
    };

在最后一个元素上，我正在尝试相对引用。我也尝试过类似的方法

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

至少对于最后一个元素，我希望看到图像。

【问题讨论】：

你的根目录是什么？
这是 Vue CLI 3 项目吗？
我已经使用 vue --version 检查了我的提示。我正在使用@vue/cli 4.1.1 @Michal Levý
@T。简而言之我的根目录有以下文件夹：node_modules、public、src
如果你的图片在src/assets/images/stooges/文件夹"@/assets/images/stooges/curly.jpg"应该可以工作（并且对我有用）

标签： vue.js vuejs2

【解决方案1】：

    <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"}]
          ]
        };
      },
    };

【讨论】：

完美！我现在可以看到图像了。非常感谢:-)