Js img src 连接变量和文本

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

我的计算结果是:

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

如果我为机器人编译:

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

不然呢

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

如何将计算出的变量与 URL 连接起来？

我试过了:

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

198183 次浏览

小开

最佳答案

不能在属性中使用卷曲(胡子标记):

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

简而言之:

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

阅读更多关于 Vue docs中的动态属性的内容。

小开

在另一种情况下，我可以使用带有反勾的模板文字 ES6, 所以你可以设定为:

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

小开

试试吧

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

小开

如果从 dataBase 处理这个问题，请尝试:

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

小开

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

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

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

小开

如果有帮助的话，我正在用下面的方法得到一个引力图像:

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

小开

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

方法1

用 +符号连接，用单引号/双引号换行字符串。

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

方法2

用反勾 `包装，用 ${variable}包装变量。由于 imgPreUrl是一种方法，因此,

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