image - 从 Vue.js 中的 props 传递和绑定(bind) img src

Question

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

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

编辑:
另外我试过这篇文章Can't dynamically 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'"
(编辑2:
正如我的回答帖子中所述，这个答案最终对我有用。)
使用 let images = require.context('../assets/', false, /\.png$/) 的类似 webpack 方法也会出现同样的错误。在我的脚本部分，作为这篇文章的答案 Can't dynamically pass relative src path for imgs in Vue.js + webpack .

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

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

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

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

零件

<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>

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

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

Answer 1

这对我有用

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

在哪里 filename作为 String 属性传入，例如 "myImage.png" .

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

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

Note: @ is a webpack alias for /src that is set by default in Vue projects