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

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

0 голосов
/ 03 декабря 2018

Я пытаюсь использовать 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 ]

0 голосов
/ 03 декабря 2018

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

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

0 голосов
/ 03 декабря 2018

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

...