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

Question

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

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

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

组件

<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

这对我有用

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

filename 作为 String 属性传入的地方，例如"myImage.png".

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

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

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

Answer 2

经过一番研究，我了解到我的问题与 webpack 和解析文件路径有关。我使用了这个答案的修改版本：
Vue.js dynamic images not working
这个答案：
Can't dynamically pass relative src path for imgs in Vue.js + webpack
由于第二个答案中的链接已失效，因此这是指向 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

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

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

这一切都不适合我：D

模板文件错误！ 您需要在设置道具之前添加“：”。

这就是我应该如何使用图片卡

<PictureCard  :picture_src="require('orange.png')"
 pic_desc='some picture description'/>

我的 PictureCard 应该是这样的：

<template>
  <div>
    <img v-bind:src="picture_src" />
  </div>
</template>

export default class PictureCard extends Vue {

@Prop({ default: require("@/assets/orange.svg") }) img!: string
 }

所以如果没有设置任何道具，所以我也添加了一个默认道具。 是的，我只使用了图像。

Answer 5

这对我有用：

这就是我使用组件的方式。

<image-element 
  :imageSource="require('@/assets/images/logo.svg')">
</image-element>

我的图片组件：

<template>
  <div>
   ...
     <img v-bind:src=imageSource />
   ...
  </div>   
</template>

<script lang="ts">
 import Vue from 'vue'
 import { Component, Prop } from 'nuxt-property-decorator'

 @Component({
   components: {
    .....
   }
 })
 export default class extends Vue {
  ...
  @Prop({ default: '' }) imageSource!: String
  ...
 }
</script>