Vue.js中动态连接img src与变量文本的技巧，你都知道吗？

2024-03-06 02:37:33

在 Vue.js 中将 img src 与变量和文本巧妙连接

动态图像源的秘诀

在构建现代 Web 应用程序时，我们经常需要动态地将图像 URL 与变量和文本连接起来。Vue.js 提供了多种方法来实现这一点，让我们探索最有效的方法。

变量插值：无缝嵌入变量

Vue.js 的插值功能允许我们直接在模板中显示变量。这可以通过使用双花括号（{{ }}）来完成。例如，如果您有一个名为 imgPreUrl 的变量，您可以将其插入图像源：

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

连接操作符：合并字符串和变量

Vue.js 还提供了连接操作符（+），它用于将字符串或变量连接在一起。通过将 imgPreUrl 变量和字符串 "img/logo.png" 连接起来，我们可以动态构建图像源：

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

计算属性：动态值计算

计算属性是 Vue.js 中的强大工具，它允许我们计算值并将其用于模板。这对于生成动态图像源非常有用。我们可以创建一个名为 imgUrl 的计算属性：

computed: {
  imgUrl() {
    return `${this.imgPreUrl}img/logo.png`;
  },
},

使用计算属性：模板中的动态源

计算属性允许我们动态地设置图像源。通过在模板中使用 imgUrl 计算属性，我们可以插入连接后的图像 URL：

<img src="{{ imgUrl }}">

示例代码：实践连接

让我们将这些概念付诸实践：

<template>
  <img :src="imgUrl">
</template>

<script>
import { computed } from 'vue';

export default {
  data() {
    return {
      imgPreUrl: 'android_asset/www/',
    };
  },
  computed: {
    imgUrl() {
      return `${this.imgPreUrl}img/logo.png`;
    },
  },
};
</script>