如何将变量绑定到图像源字符串？

Posted 2023-02-22

【中文标题】如何将变量绑定到图像源字符串？

【英文标题】：How can I bind a variable to an image source string?

【发布时间】：2019-09-02 15:31:16

【问题描述】：

我想生成一些带有变量名和图像的 v-chip 对象。图像的源字符串取决于名称。当我将名称绑定到源字符串时，图像不会加载。我已经阅读了一个类似问题的解决方案 (Vue.js img src concatenate variable and text)，但它对我不起作用。

正如您在代码中看到的那样，我尝试了两种不同的方法。一种是绑定道具，一种是计算函数。两者都不起作用。

<template>    
<div>
    <v-chip v-model="perso">
        <v-avatar>
          <img :src="'../assets/' + perso_name + '.png'"> <!--Doesn't work-->
        </v-avatar>
        perso_name
    </v-chip>   
    <v-chip v-model="perso">
        <v-avatar>
          <img :src="'../assets/' + foo + '.png'"> <!--Doesn't work-->
        </v-avatar>
        perso_name
    </v-chip>
    <v-chip v-model="perso">
        <v-avatar>
          <img src="../assets/Jon.png"> <!--This works-->
        </v-avatar>
        perso_name
    </v-chip>
</div>
</template>

<script>
export default 
  data () 
      return  perso: true 
  ,
  name: 'Personal',
  props: ['perso_name'],
  computed: 
    foo: function() 
      return this.perso_name;
    
  

</script>

我没有收到错误消息，但图片未加载。它只是显示损坏的文件图标。

【问题讨论】：

用require()包围图片源

【参考方案1】：

您可以使用模板字符串。用'``'包围属性值，用$包围变量

<img :src="`../assets/$perso_name.png`">

【参考方案2】：

在您的问题中，您没有显示您的损坏文件图标的rendered img src。所以我只能推测问题是您服务器中的文件路径不正确。

src attr 非常特殊，一些打包工具（如webpack）使用此 attr 来定位您的 img，并在打包项目时将其转换/替换为正确的路径。

在您的情况下，您将src attr与vue binding绑定，路径看起来像relative path from the img file to your .vue file。很容易出错，因为浏览器从root path加载img您的网站。

我建议你这样尝试：

使用 webpack import 将打包的 img 路径保存到字典中

<script>

var urlDic =;
urlDic.Jon = require('../assets/Jon.jpg')；
urlDic.Mike = require('../assets/Mike.jpg')；

export default 
  data () 
      return  
         urls: urlDic //save the dic to your data
       
  ,
  name: 'Personal',
  props: ['perso_name']

</script>

将 img src 绑定到 preloaded img 路径

     <v-chip v-model="perso">
        <v-avatar>
          <img :src="urls[perso_name]"> <!--it will work-->
        </v-avatar>
        perso_name
    </v-chip>   

【讨论】：

好的，我是网络开发新手。不得不先研究一下 webpack。谢谢