vue中img的src绑定

Posted 2023-03-08

参考技术A 在平常的处理中，img的src通常采用相对路径的方式来指定，然而在Vue中通过‘：src’动态绑定时不能如此，图片会加载失败。
也就是说，静态结构时，图片地址这样设置就可以正常显示：

而动态结构时，这样就不行

注意如果写成了

那就更加的错误了

这是因为网页会把根域作为相对路径的根目录，然而我们文件的路径是相对于项目文件的根目录的，当然就找不到了。而通过vue-cli建的文件结构中，有一个叫做static的文件夹，是存放静态文件的，这个文件夹下的文件会按照原本的结构放在网站根目录下。这时再使用‘/static.......’这样的路径就可以访问这些静态文件了。

第二种办法是使用require()包裹相对路径
html部分：

js部分：

如何将img src绑定到Vue中的数据

【中文标题】如何将img src绑定到Vue中的数据

【英文标题】：How to bind img src to data in Vue

【发布时间】：2018-07-28 14:16:32

【问题描述】：

我的 vue webpack 脚本中有以下内容：

<script>
  export default 
    data () 
      return 
        repos: [
          name: 'test1', src: '../assets/logo.png',
          name: 'test2', src: '../assets/underscore.png',
           ...
        ]
      
    
  
</script>

然后在我的 html 中，我试图将本地 src 元素绑定到一个 img，但我无法让它工作。这是我的 html 的样子：

<div v-for="repo in repos" :key="repo.name">
  <img :src="repo.src" />
</div>

当我的 img 源不是这样的数据绑定时，它可以正常工作：

<img :src="../assets/logo.png" />

如果我的本地图片在 Vue 中绑定了数据，为什么它们不会加载？

这是我的目录的样子：

【问题讨论】：

检查元素时，src 中的内容是什么？

../assets/logo.png

repo 名称是否唯一？你在这里显示了两次“测试”，你将它用于:key。

这是我刚刚修正的一个错字。存储库名称是唯一的。我之前使用了一个 id，但为了在这个例子中简洁起见，我改变了它。

您应该发布一个答案，详细说明您是如何解决问题的。这样，如果其他人被卡住了，他们就可以解开。

【参考方案1】：

如果您使用vue-cli，您必须记住所有内容都作为模块处理，甚至图像。如果路径在 JS 中是相对的，则需要使用 require，如下所示：

 name: 'test1', src: require('../assets/logo.png') 

您可以在此处找到更多详细信息：http://vuejs-templates.github.io/webpack/static.html

【参考方案2】：

仅用于绑定img src到数据，只需要文件地址：

<img v-bind:src="require('../image-address/' + image data)" />

以下示例显示 ../assets/logo.png ：

<template>
          <img v-bind:src="require('../assets/' + img)" />
</template>

<script>
export default 
  data: function() 
    return 
      img: "logo.png"
    ;
  
;
</script>