динамический путь в образе src vue

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 активирует изображения, поэтому приведенный выше код там не будет работать.Попробуйте локально в проекте, созданном Vue-CLI.