JavaScript：如何从 setAttribute 设置图像的路径？答案

【问题标题】：JavaScript : How to set the path to an image from a setAttribute?JavaScript：如何从 setAttribute 设置图像的路径？
【发布时间】：2020-06-02 14:48:14
【问题描述】：

我正在尝试从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/patrolBoatHorizontalView.png 404 (不是找到）

我不清楚我是否应该这样说......我正在使用 VisualStudio 编辑器，我的所有图像都存储在资产中，并且请求是从我的其中一个组件完成的VueJS 应用程序

有什么建议吗？

【问题讨论】：

图像在哪里，相对于应用程序的根文件夹（与您的 CSS 或 HTML 无关）？

标签： javascript vue.js setattribute

【解决方案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); 
}

【讨论】：

在答案本身中解释您对代码所做的更改、所做的假设等，有助于其他人稍后理解答案。