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">

原文由 ketom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不能在属性中使用 curlies（小胡子标签）。使用以下命令连接数据：

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

或简短版本：

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

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

原文由 Dan Mindru 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 Ardhi 发布，翻译遵循 CC BY-SA 3.0 许可协议