139

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

7 回答 7

261

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

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

或简短版本：

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

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

于 2016-10-26T12:08:59.000 回答
49

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

<img v-bind:src="`${imgPreUrl()}img/logo.png`">
于 2017-07-13T05:55:50.070 回答
14

试试看嘛

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

于 2019-04-15T08:21:45.493 回答
3

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

<img :src="baseUrl + 'path/path' + obj.key +'.png'">
于 2019-12-19T10:42:55.367 回答
2

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

<img
        :src="`https://www.gravatar.com/avatar/${this.gravatarHash(email)}?s=${size}&d=${this.defaultAvatar(email)}`"
        class="rounded-circle"
        :width="size"
    />
于 2020-10-27T17:03:41.123 回答
1

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

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

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

于 2020-09-29T09:54:24.990 回答
1

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

方法一

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

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

方法二

用反引号`包裹并用 包裹变量${variable}。作为imgPreUrl一种方法，

<img :src="`${imgPreUrl()}img/logo.png`">
于 2021-11-11T02:51:52.143 回答