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

Question

我在我的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 的样子：

And then in my html, I'm trying to bind the local src element to an img but I can't get it to work. Here is what my html looks like:

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

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

当我的 img source 不是数据绑定时，它可以正常工作，例如：

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

如果在Vue中绑定数据，为什么我的本地图片无法加载？

这是我的目录结构：

- rockzombie2

---

当您检查元素时，src 中有什么？ - Roy J

../assets/logo.png - rockzombie2

仓库名称唯一吗？这里显示了两次“test”，并且您正在将其用于“：key”。 - Roy J

你应该发布一个回答，详细说明你是如何解决问题的。这样，如果其他人也遇到了同样的问题，他们就可以得到帮助。 - James A Mohler

当你从脚本中获取字符串时，你需要使用 require。我发布了一个答案。 - Bill Criswell

Answer 1

如果您正在使用vue-cli，则需要记住所有内容都被处理为模块，包括图像。如果JS中的路径相对，则需要像这样使用require：

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

你可以在这里找到更多关于此的细节：http://vuejs-templates.github.io/webpack/static.html

- Bill Criswell

Answer 2

仅需绑定图片数据到标签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>

- sina

Answer 3

此外，vite 需要一种不同的方法来将源文件包含在 <script> 标签中，例如使用属性。

最常见的方法是使用以下结构：

{ name: 'test1', img: 'new URL(`@/assets/logo.png`, import.meta.url).href' }

- WAF