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

【问题标题】：Vue.js img src concatenate variable and textVue.js img src 连接变量和文本
【发布时间】：2017-03-08 09:46:32
【问题描述】：

我想将 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">

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

您不能在属性中使用卷曲（小胡子标签）。使用以下内容连接数据：

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

或短版：

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

在Vue docs 中阅读有关动态属性的更多信息。

【讨论】：

“但 Vue.js 实际上支持所有数据绑定中 JavaScript 表达式的全部功能”：vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

【解决方案2】：

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

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

【讨论】：

我已经尝试过了，但似乎 webpack 在处理绑定之前运行，因为我的 url 作为“@./assets/syndicate_images/34.jpg”输出到浏览器
imgPreUrl 是一个变量，而不是一个函数。

【解决方案3】：

试试看

&lt;img :src="require(`${imgPreUrl}img/logo.png`)"&gt;

【讨论】：

快速简单，你
这是正确的方法，如文档中所述：nuxtjs.org/docs/2.x/directory-structure/assets#images

【解决方案4】：

如果你从数据库中处理这个尝试：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

对我来说，它说模块没有找到并且没有工作。最后，我找到了这个解决方案并工作了。

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

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

【讨论】：

很好~谢谢 :)

【解决方案7】：

以下两种方法都有效。

方法一

与+ 符号连接并用单/双引号包裹字符串。

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

方法二

用反引号` 包装，用${variable} 包装变量。由于imgPreUrl是一种方法，所以，

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

【讨论】：