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

Posted 2023-02-22

【中文标题】从 Vue.js 中的 props 传递和绑定 img src

【英文标题】：Passing and binding img src from props in Vue.js

【发布时间】：2019-10-30 15:56:15

【问题描述】：

我正在尝试使用来自 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>

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

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

【问题讨论】：

直接传递图像而不是源字符串怎么样？例如，在主组件中导入图像并将其传递到 PicutureCard 中？

这个问题经常出现。简单的解决方法是使用:src="require(picture_src)"

Vue.js - Trying to bind dynamic images... what should I do? 和 Vue.js dynamic images not working 的可能重复

这里的最佳实践是使用 js 创建新图像并使用来自 props 的 url

感谢您的反馈。当我尝试使用 :src="require(picture_src)" 时出现错误，整个组件不再呈现。 Error in render: "Error: Cannot find module '../assets/orange.png'"

【参考方案1】：

这对我有用

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

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

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

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

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

【参考方案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'/>

【参考方案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

【参考方案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
 

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

【参考方案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>