图像src vue中的动态路径

【问题标题】：dynamic path in image src vue图像src vue中的动态路径
【发布时间】：2019-10-24 23:55:49
【问题描述】：

关于绑定图像src 无法正常工作的问题已经有很多问题，我已经研究过了，其中提到使用require 导入图像。但是，我的问题有点不同：我正在根据用户选择的当前locale 更改图像src。我尝试根据currentLocale 在src 中仅绑定一个字符串，但图像未加载。我还在绑定中尝试了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

【问题讨论】：

标签： vue.js vuejs2

【解决方案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-ing 图像资产时显示 a bug，因此上面的代码在那里不起作用。在 Vue-CLI 生成的项目中本地尝试。

【讨论】：