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

Posted 2023-02-22

【中文标题】Vue JS中的图像路径[重复]

【英文标题】：Image path in Vue JS [duplicate]

【发布时间】：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 中，而不是在您的模板中。在这里查看一些答案~***.com/questions/47313165/…

哦，好的，谢谢你菲尔@Phil

【参考方案1】：

您可以使用require()

例如：

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

【讨论】：

是的，它有效，谢谢@Sanjay

对我有用的是将 require 包裹在 JS 中，例如 url: require('../../assets/image1.png')

提一下为什么以及如何工作会非常有用。