Vue JS中的图像路径[重复]答案

【问题标题】：Image path in Vue JS [duplicate]Vue JS中的图像路径[重复]
【发布时间】：2019-02-20 12:05:15
【问题描述】：

我在 vue js 中有这样的结构文件：

--资产
----图片
------my-image.png
------my-image2.png

--组件
----用户
------userStart.vue

我将使用数组中的对象显示图像这是我的代码（userStart.vue）

<img v-for="image in images" :src="image.url"/>

export default{
  data(){
    return {
      images : [
         {
            url : '../../assets/image/my-image.png',
            name : 'My Image 1',
         },
         {
            url : '../../assets/image/my-image1.png',
            name : 'My Image 2'
         }
      ]
    }
  }
}

问题是我无法显示图像，如何解决？谢谢

【问题讨论】：

如果您不导入图像文件，则该 URL 与当前文件无关 - 它是相对于所服务目录的根目录。您从哪个目录提供静态资产？
你在使用 vue-cli 吗？如果有，是哪个版本？
是的，我使用 vue-cli 2.9.6
@Sanjay 下面是正确的，因为您必须使用 require 但在您的 JS 中，而不是在您的模板中。在这里查看一些答案~stackoverflow.com/questions/47313165/…
哦，好的，谢谢你菲尔@Phil

标签： javascript arrays vue.js

【解决方案1】：

您可以使用require()

例如：

<img v-for="image in images" :src="require(image.url)">

【讨论】：

是的，它有效，谢谢@Sanjay
对我有用的是将 require 包裹在 JS 中，例如 { url: require('../../assets/image1.png') }
提一下为什么以及如何工作会非常有用。