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

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文档中阅读有关动态属性的更多信息.

Answer 2

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

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

Answer 3

你试一试

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

Answer 4

遵循这两种方法都是有效的。

方法一

与符号连接+并用单/双引号括起字符串。

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

方法二

用反引号括起来`，变量用${variable}. 正如imgPreUrl方法一样，

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

Answer 5

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

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