Question

我想将Vue.js变量与图像URL连接起来。

我计算的内容：

imgPreUrl : function() {
    if (androidBuild) return "android_asset/www/";
    else return "";
}

如果我为android构建：

<img src="/android_asset/www/img/logo.png">

否则

<img src="img/logo.png">

如何将计算变量与URL连接？

我试过了：

<img src="{{imgPreUrl}}img/logo.png">

Answer 1

您无法在属性中使用curlies（胡须标记）。使用以下内容连接数据：

<img v-bind:src="imgPreUrl + 'img/logo.png'">

或简短版本：

<img :src="imgPreUrl + 'img/logo.png'">

详细了解Vue docs中的动态属性。

Answer 2

在另一种情况下，我可以使用带有反引号的模板文字ES6，因此，你的可以设置为：

<img v-bind:src="`${imgPreUrl()}img/logo.png`">

Answer 3

只需尝试

<img :src="require(`${imgPreUrl}img/logo.png`)">

Answer 4

不起作用：

<div :class="['some-class', someClassNameProp, { `some-class--${specificModifierProp}`: showSomethingSpecificProp }]" >

更好

<div :class="['some-class', someClassNameProp, showSomethingSpecificProp ? specificModifierComputed : '']" >

...

computed: {
  specificModifierComputed() {
    return `some-class--${specificModifierProp}`;
  }
},

Answer 5

如果您从数据库中处理此问题，请尝试：

<img :src="baseUrl + 'path/path' + obj.key +'.png'">

Answer 6

对我来说，它说Module没找到也没有用。终于，我找到了解决方案并开始工作。

<img v-bind:src="require('@' + baseUrl + 'path/path' + obj.key +'.png')"/>

需要在本地路径的开头添加“ @”。

Answer 7

如果有帮助，我正在使用以下方法获取图形图像：

<img
        :src="`https://www.gravatar.com/avatar/${this.gravatarHash(email)}?s=${size}&d=${this.defaultAvatar(email)}`"
        class="rounded-circle"
        :width="size"
    />

Vue.js img src连接变量和文本

7 个答案: