从 Vue.js 中的 props 传递和绑定 img src

Question

我正在尝试使用来自 props 的路径作为 src 属性来显示带有 img 标签的图像。

我尝试使用 --- 更改路径，使用 @ src 整个路径，在组件中添加 ../assets/ orange.png 仅传递文件名（ --- ）作为道具。我总是显示默认的损坏图像。在浏览器中检查时，路径似乎很好。当我直接显示图像时，我可以看到路径被解析为一些不同的路径 <img data-v-1212d7a4="" src="/img/orange.7b71a54c.png"> 。

---

编辑： 另外，我尝试了这篇文章 Can’t dynamic pass relative src path for imgs in Vue.js + webpack ，其中使用 <img :src="require(picture_src)" /> 作为答案。这会导致错误： Error in render: "Error: Cannot find module '../assets/orange.png'"

（ Edit2： 这个答案最终对我有用，如我的回答帖子中所述。）

在我的脚本部分中使用 let images = require.context('../assets/', false, /\.png$/) 的类似 webpack 方法会发生相同的错误，作为这篇文章 Can’t dynamic pass relative src path for imgs in Vue.js + webpack 的答案。

---

我是 Vue.js 的新手，所以我不完全知道发生了什么或如何搜索它，或者它可能与我最初尝试的内容无关。

当我直接通过路径时，我可以显示我的图像，就像这样

<img src="../assets/orange.png"/>

现在我实际上想将它传递给道具中的组件，然后在组件内部显示它从道具读取路径。

零件

<template>
  <div>
    <img :src=picture_src />
    <div class="pic_sub">{{pic_desc}}</div>
  </div>
</template>
<script>
export default {
  name: 'PictureCard',
  props: {
    picture_src: String,
    pic_desc: String
  }
}
</script>

使用组件：

 <template>
  <div>
    <PictureCard pic_desc='some description text' picture_src='../assets/orange.png' />
  </div>
</template>

<script>
import PictureCard from './components/PictureCard.vue'
export default {
  name: 'app',
  components: {
    PictureCard
  }
}
</script>

如果可能的话，我很想从通过组件道具的路径显示我的。

否则，在这种情况下，我很想知道一些其他解决方案、解决方法或最佳实践知识。

原文由 turninglights 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这对我有用

<img :src="require(`@/assets/img/${filename}`)">

其中 filename 作为字符串属性传入，例如 "myImage.png" 。

确保使用特定于项目的路径。

来源： https ://github.com/vuejs-templates/webpack/issues/450

注意： @ 是 /src 在 Vue 项目中默认设置的 webpack 别名

原文由 M3RS 发布，翻译遵循 CC BY-SA 4.0 许可协议