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

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

1 голос
/ 20 апреля 2020

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

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

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

1 Ответ

2 голосов
/ 20 апреля 2020

Использовать 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 Загрузчик Документы

...