AlexaShemetova
@AlexaShemetova
While I'm breathing - I love and believe

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

Всем привет, передаю один и тот же путь картинки, в одном случае через переменную, в режиме 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
  • Вопрос задан
  • 2219 просмотров
Пригласить эксперта
Ответы на вопрос 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 оптимизировать пути к изображениям при билде.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы