Javascript, который автоматически заполняет путь к файлу HTML для изображений

Я пытаюсь использовать window.location.pathname и внедряю innerHTML для генерации путей к файлам для изображения, поэтому все, что мне нужно сделать, это ввести fileName.png в div в теле html и заставить 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>
Источник

2 ответа

Решение

Приведенное ниже решение извлекает имена изображений из Div, используя .querySelectorAll() который возвращает 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>

РЕДАКТИРОВАТЬ: В ответ на критику Измаила, я немного отредактировал код и прокомментировал каждую строку, чтобы вы могли извлечь из этого ответа. В коде есть две гиперссылки, которые помогут вам по-современному думать о кодировании и, таким образом, вам будет проще интерпретировать современный код, который вы читаете.

Около:

Редактировать 2: с дальнейшим уточнением, ответ был изменен, чтобы вытянуть имена файлов изображений из элементов Div, уже находящихся в DOM.

Источник

Пусть ID равен идентификатору вашего элемента

Вызовите: document.getElementById(ID).src = "image_src" Когда вы хотите изменить изображения, например, действие по нажатию кнопки мыши или как часть функции.

Источник
Другие вопросы по тегам