Vue DOM изображение не будет отображаться правильно

Question

Я использую фреймворк Vue и создаю изображение с помощью функции DomUtil.Create. На этом изображении я хочу динамически записать источник этого изображения. Но изображение не будет отображаться пользователю.

Я поместил обычное изображение на страницу с помощью тега <img>, и оно работает здесь. Только при создании элемента DOM это не работает. Я поместил здесь путь, закодированный жестко, чтобы быть уверенным, что путь правильный.

var img = L.DomUtil.create("img", "popUpImg", divImg);
img.src = '@/assets/pictures/1.png';

Answer 1

Использовать require()

При привязке к пути / имени файла проекта используйте require:

require('@/assets/pictures/1.png');

Если вы используете пути и имена ресурсов проекта в Vue CLI, Webpack на самом деле переименовывает их при комплектации. Vue CLI спокойно позаботится об этом, если вы используете строковый путь для img src в шаблоне . Но в любой другой ситуации вам нужно вручную использовать require Webpack, чтобы дать правильный путь и имя файла во время выполнения.

^{- Примечание: Вы можете npm run build, а затем проверьте папку dist> img, чтобы увидеть переименование для себя. -}

---

Можно ли использовать переменную с require()?

При использовании пути / имени переменной require требуется некоторая помощь. Вы должны жестко закодировать хотя бы первую часть пути в виде строки.

• Например, это работает:

const filename = '1.png';
require('@/assets/pictures/' + filename); // <-- The string is needed

• Это тоже работает:

const path = 'assets/pictures/1.png';
require('@/' + path); // <-- This is good enough too

• Но это будет не работа:

const fullpath = '@/assets/pictures/1.png';
require(fullpath); // <-- No. Can't infer the path from a variable only

Подробнее в Vue Загрузчик Документы