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

Question

我想生成一些带有变量名和图像的 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>

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

Answer 1

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

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

Answer 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>