Vue JS 数据绑定对 img src 属性无效。

Question

我正在使用Vue 2和Vue-cli 3。我试图将标签的src绑定到数据中的一个变量上。

具体地说，我正在执行以下操作：

<img class="img-time-matters" :src="`./../assets/time-comparison-${locale}.png`">

export default {
   name: "home",
   components: {},  
   data() {
       return {
           locale: locale // 'en'
       };
   }
}

绑定功能已经生效。

使用Chrome开发者工具并检查网络活动，我看到绑定已经可以工作：

http://localhost:8080/assets/time-comparison-en.png

然而资源未找到。

如果我删除数据绑定并且在代码中硬编码课程路径为：

<img class="img-time-matters" :src="`./../assets/time-comparison-en.png`">

Vue会将资源链接解析为以下路径来查找图片:http://localhost:8080/img/time-comparison-en.74a6f0ca.png 您该如何使Vue能够正确地绑定数据，以便它可以正确地解析绑定（即time-comparison-en.74a6f0ca.png）。

谢谢！

- Bill Haack

---

你正在使用哪些webpack插件/加载器？ - Daniel

Answer 1

请尝试require

<img class="img-time-matters" :src="require(`../assets/time-comparison-${locale}.png`)">

- ittus

---

感谢ittus，非常感谢。我花了一点时间解决这个问题。我在其他地方看到了这个解决方案，但无法让它正常工作。我误用了 require 函数，使用方式如下：<img class="img-time-matters" :src=require("../assets/time-comparison-${locale}.png")>我一直收到语法错误的提示。require函数需要放在引号内。再次感谢。 - Bill Haack

Answer 2

另一种解决问题的替代方案是，在绑定到src之前，首先将图像作为模块导入，以下是一个示例。

<script>
import logo from "../assets/logo_800_white_background.png";
export default {
  data() {
    return {
      imgPath: logo,
    };
  },
};
</script>

<template>
  <div class="flex items-center justify-between py-6 max-w-[1155px] mx-auto">
    <div>
      <img
        :src="imgPath"
        alt="logo"
      />
    </div>
    <div class="flex items-center space-x-4">
      <router-link to="/">Home</router-link>
      <router-link to="/about">about</router-link>
      <router-link to="/software">software</router-link>
      <router-link to="/hardware">hardware</router-link>
      <router-link to="/contact">contact</router-link>
    </div>
  </div>
</template>

- abdulkareem alabi