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

Question

我试图通过使用src属性的props路径来显示带有img标记的图像。

我试着用@更改路径，用src使用整个路径，在组件中添加./assets/，并且只传递文件名（orange.png）作为道具。我总是显示默认的断开图像。在浏览器中检查时，路径看起来很好。当我直接显示图像时，我可以看到路径被解析为不同的路径

编辑：此外，我还尝试了在Vue.js网页包中使用

（Edit2：正如我的回答帖子中所描述的，这个答案最终对我有效。）
在我的脚本部分使用let images=require.context（“../assets/”，false，/\.png$/）时，类似的webpack方法也会出现同样的错误，因为这篇帖子上的答案无法动态传递Vue.js webpack中imgs的相对src路径。

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

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

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




Answer 1

这是我最喜欢的超级简单的方法。它可以很容易地在我的项目中的任何文件夹中的任何文件中重用。只需从父级的角度将实际路径作为字符串传递：

//some file
    <ParentA>
      <ImageComponent 
         myImagePath="../../../../../myCat.png"
      />
    </ParentA>

//some other file in a different folder in my project
    <ParentB>
      <ImageComponent 
         myImagePath="../../myCat.png"
      />
    </ParentB>


//child component file
<template functional>
   <div>
      <img :src="props.myImagePath">
   </div>
</template

Answer 2

经过一些研究，我了解到我的问题与webpack和解析文件路径有关。我使用了此答案的修改版本：
Vue.js动态图像不工作
此答案：
无法动态传递Vue.js网页包中IMG的相对src路径
，因为第二个答案中的链接已断开，这里有一个指向require.context文档的活动链接：https://webpack.js.org/guides/dependency-management/#requirecontext

当我尝试第二个链接的答案时，我的错误是我只返回orange.png作为路径，而我需要在开始时添加。/。

我的工作图片组件现在看起来像这样。

<template>
  <div>
    <img :src="resolve_img_url(picture_src)" />
    <div class="pic_sub">{{pic_desc}}</div>
  </div>
</template>
<script>
export default {
  name: 'PictureCard',
  props: {
    picture_src: String,
    pic_desc: String
  },
  methods: {
    resolve_img_url: function (path) {
      let images = require.context('../assets/', false, /\.png$|\.jpg$/)
      return images("./"+path)
    }
  }
}
</script>

我编辑正则表达式以匹配.png和.jpg文件结尾。因此，现在通过道具看起来是这样的

<PictureCard  picture_src='orange.png' pic_desc='some picture description'/>

Answer 3

这对我有用

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

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

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

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

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