无法在 Vue 中加载图像

Posted 2023-02-23

【中文标题】无法在 Vue 中加载图像

【英文标题】：Can't get image to load in Vue

【发布时间】：2020-01-20 01:42:02

【问题描述】：

无法使用 Vue 加载简单的图像文件（使用扩展名为 .vue 的单文件组件）。这是我放在模板中的代码：

<div><a href=""><img :src="london.jpg"></a></div>

我做错了什么？

【问题讨论】：

您没有使用可绑定的值，所以不要使用绑定。将:src 更改为src

还是不行

你遇到了什么错误？

这是一个非常模糊的问题描述。 london.jpg 文件是否存在于相对于该组件的给定位置？见cli.vuejs.org/guide/…

在您的文件中，这个.vue 组件的位置是什么？ london.jpg 文件的位置是什么？

【参考方案1】：

我习惯把所有图片都放到public文件夹中，所以我不需要webpack来加载图片。

图片的路径是'/public/assets/img/london.jpg'

所以，在任何 Vue 组件中，我都可以使用

<div>
   <a href="#">
     <img src="/assets/img/london.jpg" />
   </a>
</div>

【参考方案2】：

你也可以直接在你的模板中要求。

<div>
    <a href="#">
        <img :src="require(`@/assets/img/london.jpg`)"/>
    </a>
</div>

请注意，@ 是您的 src/ 文件夹。

【参考方案3】：

绑定属性时，模型或数据类型必须正确。

要绑定:src，必须是字符串或数据模型。

<div> <a href=""><img :src="'london.jpg'"></a></div>

或

<div> <a href=""><img src="img"></a></div>

或

export default 
  data () 
    return 
      img: require('london.jpg')
    
  

<div> <a href=""><img :src="img"></a></div>

【讨论】：

我保证最后一个不会起作用，因为捆绑器（例如 Webpack）不会包含图像资产

什么意思？

你应该试试看。 *** 上也有很多关于它的问题

我明白了。我会解决的。

编译失败。 ./rg-comp.vue?vue&type=script&lang=js& (/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/babel-loader/lib??ref--12-0!/usr /local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/local/lib/node_modules/@vue/cli- service-global/node_modules/vue-loader/lib??vue-loader-options!./rg-comp.vue?vue&type=script&lang=js&) Module not found: Error: Can't resolve 'london.jpg' in ' '