Javascript 自动填充图像的 HTML 文件路径

Question

我正在尝试使用 window.location.pathname 并注入 innerHTML 来生成图像的文件路径，所以我需要做的就是在 div 中键入 fileName.png html body 并让 javascript 生成它后面的文件路径，以便它在呈现的网站中显示图像。这适用于未与工作文件存储在同一文件夹中的图像。我取得了一定的成功，但它只适用于每页一张图片，这不是很有帮助。

我已将此代码用于每页一张图片：

<div class="picName">pic.png</div><div id=<"shortcut"></div>`

<script>
  var relativePath = window.location.pathname;
  var picName = document.getElementById('matts-shortcut').previousElementSibling.innerHTML;
  document.getElementById("matts-shortcut").innerHTML =
    '<src=\'/images' + relativePath + '/' + picName + '\'>';

</script>

Answer 1

下面的解决方案使用 .querySelectorAll() 从 Divs 中提取图像名称，其中 returns 一个 DOM NodeList。 NodeList 很有用，因为它有一个 forEach() 方法，可用于循环遍历列表中的每个项目。使用 textContent 属性作为图像名称循环遍历每个列表项。然后您需要为每个图像创建一个新的图像元素。为此，您可以执行类似的操作。

let relativePath = "https://dummyimage.com"; // replace the url with path name (maybe window.location.path)
// create a reference to the input list
// querySelectorAll return a NodeList
let inputNameList = document.querySelectorAll('.image-name');
// Loop through each image name and append it to the DOM
// the inputNameList (NodeList) has a "forEach" method for doing this
inputNameList.forEach((image) => {
  let picName = image.textContent;
  // Create a new image element
  let imgEl = document.createElement('img');
  // Set the src attribute of the image element to the constructed URL
  // the name of the picture will be the div text content
  // This is done with a template literal that you can learn about here:
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
  imgEl.src = `${relativePath}/${image.textContent}`;
  // Now we have a real image element, but we need to place it into the DOM so it shows up
  // Clear the image name
  image.textContent = "";
  // Place the image in the Div
  image.appendChild(imgEl);
});

<div class="image-name">300.png</div>
<div class="image-name">200.png</div>
<div class="image-name">100.png</div>
<div class="image-name">400.png</div>

编辑： 为了回应 Ismael 的批评，我对代码进行了轻微的编辑，并对每一行进行了注释，以便您可以从这个答案中学习。代码中引用了两个超链接，可帮助您以现代方式思考编码，因此您可以更轻松地解释您阅读的现代代码。

关于：

编辑 2： 经过进一步澄清，答案已被修改为从 DOM.

中已有的 Div 元素中提取图像文件名

Answer 2

让 ID 等于您元素的 ID

呼吁： document.getElementById(ID).src = "image_src" 当您想要更改图像时，例如单击操作或作为函数的一部分。

Javascript 自动填充图像的 HTML 文件路径

Javascript that automatically fills in HTML file path for images

html

javascript

image

innerhtml

pathname