JavaScript: Как установить путь к изображению из setAttribute?

Question

Я пытаюсь установить путь к изображению в моем локальном хранилище из setAttribute, но, несмотря на четкую настройку его пути, я получаю эту ошибку не найденного изображения, вот часть моего кода:

if (shipLocation[0][0] == shipLocation[1][0] && i == 0) {
    var x = document.createElement("IMG");
    x.setAttribute("src", "../assets/patrolBoatHorizontalView.png"); // THIS IS THE PATH

}

Ошибка

GET http://localhost: 8081 / assets / patrolBoatHor horizontalView.png 404 (не Найдено)

Я не уверен, если это так, как я должен это выразить ...... Я использую VisualStudio Editor, и все мои изображения хранятся в активах, и запрос сделано из одного из моих компонентов в этом VueJS приложении

Любой совет?

Answer 1

Вы можете использовать метод require для загрузки изображения в процессе сборки. Webpack загрузит образ в процессе сборки.

Пример:

if (shipLocation[0][0] == shipLocation[1][0] && i == 0) {
  var x = document.createElement("img");
  let image = require("../assets/patrolBoatHorizontalView.png");
  x.setAttribute("src", image); 
}