Question

我想生成一些带有可变名称和图像的v芯片对象。图像的源字符串取决于名称。当我将名称绑定到源字符串时，不会加载图像。我已经读过类似的问题（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属性非常特殊，某些打包工具（如webpack）使用此属性来定位您的img，并在打包项目时使用正确的路径对其进行转换/替换。

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

我建议您这样尝试：

使用webpack导入将打包的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>

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

2 个答案: