Question

关于绑定图像src的工作方式，已经有很多问题，我已经遍历了，其中提到使用require导入图像。但是，我的问题有点不同：我正在根据用户选择的当前src更改图像locale。我尝试仅基于src绑定currentLocale中的字符串，但是图像未加载。我还在绑定中尝试了require。

资产的文件结构：

+ en
`-- download.jpeg
|
+ fr
`-- download.jpeg

我的组件：

<template>
  <div>
    <img :src="'../assets/en/' + this.currentLocale + '/download.jpeg'">
  </div>
</template>

<script>
//import { imageSrc } from "@/assets/en/download.jpeg";
export default {
  name: "HelloWorld",
  data() {
    return {
      currentLocale: "en"
    };
  }
};
</script>

codesandbox

Answer 1

您的src绑定路径中有错误（en硬编码）：

<img :src="'../assets/en/' + this.currentLocale + '/download.jpeg'">
                      ^^^

但是它也应该在该路径上使用require关键字：

<img :src="require('../assets/' + this.currentLocale + '/download.jpeg')">

一些优化：

this在组件模板中是不必要的，因此您可以只使用currentLocale而不是this.currentLocale
Vue CLI项目为src目录（即@）提供了路径别名，因此您可以使用@/assets代替../assets

结果：

<img :src="require('@/assets/' + currentLocale + '/download.jpeg')">

Codesandbox似乎在require输入图像资产时显示a bug，因此上面的代码在那里不起作用。在Vue-CLI生成的项目中本地尝试。

图像src vue中的动态路径

1 个答案: