Почему не билдится путь к картинке, заданный через переменную vue 3, vite?

Question

[Александра]

Всем привет, передаю один и тот же путь картинки, в одном случае через переменную, в режиме dev отрабатывают оба варианта, но при билде приложения путь, что задается через переменную не билдится, получаю битую картинку

<!--  '/src/assets/images/home/nortland.png' -->
            <img :src="item.objects[0].image">
            <img src="/src/assets/images/home/nortland.png">

В итоге в первом случае комплируется /src/assets/images/home/nortland.png
Во втором правильный путь в билде /assets/nortland-083b8953.png

Answer 1

[5465]

Проблема, вероятнее всего, связана с тем, что при билде приложения Vite автоматически изменяет путь к статическим ресурсам, таким как изображения, чтобы оптимизировать их загрузку на клиенте.

В первом случае, когда вы используете переменную для задания пути к изображению, Vite не может изменить этот путь, так как он не указан явно в HTML-коде.

Во втором случае, когда вы явно указываете путь к изображению в HTML-коде, Vite может изменить этот путь при билде, чтобы оптимизировать загрузку изображения.

Чтобы решить эту проблему, вы можете явно указать путь к изображению в HTML-коде и использовать его вместо переменной. Если вы хотите сохранить переменную для удобства управления путями к ресурсам, то вы можете создать объект конфигурации, который будет хранить пути к изображениям, и использовать его для задания путей в HTML-коде и в JavaScript-коде.

Например, в вашем случае, вы можете создать объект конфигурации в отдельном файле, например, config.js, и импортировать его в ваш код:

// config.js
export default {
  imagePath: '/src/assets/images/home/'
}

// ваш код
import config from './config.js'

<!-- явно указываем путь к изображению в HTML-коде -->
<img src="${config.imagePath}nortland.png">

// используем путь к изображению в JavaScript-коде
item.objects[0].image = `${config.imagePath}nortland.png`;

Таким образом, вы можете легко изменять пути к изображениям, не меняя их везде в вашем коде. Кроме того, это позволит Vite оптимизировать пути к изображениям при билде.

Comments

[Александра]

Попробовала, не помогло) опять же, в дев режиме работает, в билде нет. Переменную вообще отказывается принимать

[5465]

Александра, При использовании переменных для путей к файлам в Vue 3 важно учитывать, что они будут рассматриваться как относительные пути относительно корня приложения во время сборки.

В вашем случае, если путь /src/assets/images/home/nortland.png задан через переменную item.objects[0].image, то он будет рассматриваться как относительный путь от корня приложения, и при сборке проекта Vite должен автоматически определить, какие файлы нужно скопировать в итоговую папку сборки.

Однако, возможно, есть проблема в том, что Vite не может правильно определить путь к файлу при сборке, потому что путь к файлу находится в переменной, которую он не может интерпретировать. В этом случае можно попробовать использовать import для импорта изображения и передачи его в шаблон в качестве свойства src.

Например:

<template>
  <div>
    <img :src="imageSrc" alt="image" />
  </div>
</template>

<script>
import nortlandImage from '/src/assets/images/home/nortland.png';

export default {
  data() {
    return {
      imageSrc: nortlandImage,
    };
  },
};
</script>

В этом случае изображение импортируется как модуль, а путь к нему определяется относительно корня приложения, что позволяет Vite правильно скопировать его при сборке.

[Александра]

5465, так скорее всего сработает, когда подключаю картинку как компонент тоже работает, но я получаю картинку в компонент пропсом из объекта, как тут то быть?

<template>
  <div
    :class="[$style.DistrictLocal, classes]"
    :style="{width: width + 'px'}"
  >
    <img
      :src="image"
      :alt="name"
    >
  </div>
</template>

<script>
export default {
  name: 'DistrictLocal',

  props: {
    name: {
      type: String,
      default: ''
    },
    image: {
      type: String,
      default: ''
    },

[5465]

Александра, Если вы получаете путь к изображению в компоненте через пропс, вы можете использовать тот же подход, что и в моем предыдущем ответе, но вместо импорта изображения вы будете передавать его путь через пропс и использовать его в шаблоне.

Например:

<template>
  <div>
    <img :src="imageSrc" alt="image" />
  </div>
</template>
<script>
export default {
  props: {
    image: {
      type: String,
      default: '/src/assets/images/home/nortland.png',
    },
  },
  data() {
    return {
      imageSrc: '',
    };
  },
  created() {
    import(`@/${this.image}`).then((imageSrc) => {
      this.imageSrc = imageSrc.default;
    });
  },
};
</script>

В этом случае путь к изображению передается в компонент через пропс image, и затем он используется в опции created для импорта изображения и установки его в свойство imageSrc, которое используется в шаблоне. Обратите внимание, что в данном примере используется динамический импорт, который позволяет загрузить изображение во время выполнения, когда Vite уже скопировал все необходимые файлы.

[Александра]

5465, получаю такое предупреждение, но при этом на деве работает, а на билде в src просто пусто

22:33:48 [vite] warning: 
Z:/Dev/my-projects/warmaster-online/src/components/common/Districts/DistrictLocal.vue
50 |      /* @vite-ignore */
51 |      import(`${this.image}`).then((imageSrc) => {
52 |        this.imageSrc = imageSrc.default;
   |              ^
53 |      });
54 |    }
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

[5465]

Александра, Это предупреждение от Vite, что он не может анализировать динамический импорт в строковом формате, который вы используете. Как указано в сообщении, это ограничение Rollup, который используется Vite для сборки проекта.

Если вы уверены, что импорт должен оставаться динамическим, вы можете использовать комментарий /* @vite-ignore */ внутри вызова import() для подавления предупреждения:

import(/* @vite-ignore */ `${this.image}`).then((imageSrc) => {
  this.imageSrc = imageSrc.default;
});

Однако, если вы можете использовать статический импорт для вашего изображения, это может быть более предпочтительным решением. Как я уже упоминал, это позволит Vite определить путь к файлу во время сборки проекта и автоматически скопировать его в итоговую папку сборки.

Вы можете попробовать использовать require вместо import, чтобы выполнить статический импорт изображения из переменной this.image:

this.imageSrc = require(this.image).default;

Если ваша переменная this.image содержит относительный путь к изображению, который должен быть рассчитан от корня приложения, вы можете добавить знак "~" в начало пути, чтобы указать, что это путь, который должен быть интерпретирован как относительный путь от корня приложения:

this.imageSrc = require(`~/src/assets/images/${this.image}`).default;

[Alex D]

5465, на чат гпт стиль смахивают сильно ответы