javascript - VueJS：将图像文件位置数据绑定到 img 标签的 src 属性不起作用

Question

首先：我知道一个类似的问题（Vue JS data binding not working for img src），但我仍然在这里发布这个问题，因为该问题的解决方案没有解决我的问题。

我想在我的 Web 应用程序中显示图像（用 VueJS 编码），但不幸的是，当我将图像文件位置字符串绑定到标记的src属性时img，图像不会显示在 Web 应用程序中。

我有以下代码：

<template>
  <div class="home">
    <img src="@/assets/Home.jpg" />
    <img :src="src" />
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "Home",
  data() {
    return {
      src: "@/assets/Home.jpg",
    };
  },
});
</script>

第一个 img 组件正常显示，但第二个（将数据绑定到 src 属性）没有。

我已经尝试过（正如Vue JS data binding not working for img src中所建议的那样）：

<img :src="require(src)" />

这给了我错误：

[Vue warn]: Error in render: "Error: Cannot find module '@/assets/Home.jpg'"

谢谢你的帮助！

标签： javascriptvue.js