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

Question

我试图通过使用来自 props 属性的路径来显示带有 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 方法会发生同样的错误，因为这篇文章的答案无法动态传递相对 src Vue.js + webpack 中 imgs 的路径。

---

我是 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}`)">

wherefilename作为 String 属性传入，例如"myImage.png".

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

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

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

Answer 2

较新的解决方案：

使用 Vite 时，“require()”方法不起作用。

我收到此错误：ReferenceError：未定义要求。

这就是我在没有“require()”的情况下使用组合 API 解决它的方法：

来自父组件：

<ChildComponent icon-filename="icon.svg" />

子组件：

<template>
  <div>
    <img :src="getImageUrl()">
  </div>
</template>

<script setup lang="ts">
import {defineProps} from "vue";

const props = defineProps({
  iconFilename: String
})

function getImageUrl() {
  // This path must be correct for your file
  return new URL(`../assets/icons/${props.iconFilename}`, import.meta.url)
}

</script>

Answer 3

经过一番研究，我明白我的问题与 webpack 和解析文件路径有关。我使用了这个答案的修改版本：
Vue.js dynamic images not working
和这个答案：
Can't dynamic 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'/>