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

Posted

技术标签:

【中文标题】如何在 Vue JS 的 img src 中引用图像路径【英文标题】:How do I reference an image path in an img src in Vue JS 【发布时间】: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"]
      */
    ;

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

&lt;img :src="require(item.img)"&gt;

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

【问题讨论】:

你的根目录是什么? 这是 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"应该可以工作(并且对我有用) 【参考方案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"]
          ]
        ;
      ,
    ;

【讨论】:

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

以上是关于如何在 Vue JS 的 img src 中引用图像路径的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 图片不显示 | 图片资引用 | img src 路径出错

Vue.js 图片不显示 | 图片资引用 | img src 路径出错

vue中怎么动态添加img的路径

加载javascript时如何在vue组件中引用javascript中的img

Vue.js 如何将字符串与 img src 中的方法连接起来

vue项目中打包background背景路径问题