时间戳

首页 > 解决方案 > 从 Vue.js 中的 props 传递和绑定 img src

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

问题描述

我正在尝试使用来自 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： 这个答案最终对我有用，如我的回答帖子中所述。）在我的脚本部分中
使用类似的 webpack 方法也会发生同样的错误let images = require.context('../assets/', false, /\.png$/)，因为这篇文章的答案不能动态传递相对 src Vue.js + webpack 中 imgs 的路径。

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

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

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

标签： imagevue.js

解决方案

这对我有用

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

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

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

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

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

推荐阅读