Vue.js img src 连接变量和文本
我想将 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">
您不能在属性中使用 curlies（小胡子标签）。使用以下命令连接数据：
<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`">
imgPreUrl 是一个变量，而不是一个函数。
如果你从数据库中处理这个尝试：
<img :src="baseUrl + 'path/path' + obj.key +'.png'">
如果有帮助，我将使用以下方法获取 gravatar 图像：
<img
:src="`https://www.gravatar.com/avatar/${this.gravatarHash(email)}?s=${size}&d=${this.defaultAvatar(email)}`"
class="rounded-circle"
:width="size"
/>
遵循这两种方法都是有效的。
方法一
与 + 符号连接并用单/双引号包裹字符串。
<img :src="imgPreUrl() + 'img/logo.png'">
方法二
用反引号 ` 换行，用 ${variable} 换行变量。由于 imgPreUrl 是一种方法，因此，
<img :src="`${imgPreUrl()}img/logo.png`">
对我来说，它说模块没有找到并且没有工作。最后，我找到了这个解决方案并工作了。
<img v-bind:src="require('@' + baseUrl + 'path/path' + obj.key +'.png')"/>
需要在本地路径的开头添加“@”。
关注公众号
不定期副业成功案例分享
