Замена src в img на другое значение через JS

Question

Необходимо заменить src на другое значение через JS (HTML трогать при этом нельзя). Допустим <img src="picture/image.png"> стоит на сайте, но вместо picture/image.png должно отображаться picture/picture.png

Слабо разбираюсь в JS, пытался делать вот так:

Начало кода: var img = document.querySelector('img[src="picture/image.png"]');, затем один из вариантов:

1 вариант: img.setAttribute('src', 'picture/picture.png');

2 вариант: img.src = 'picture/picture.png';

3 вариант: img.src = img.src.replace("pic/jasmine.png","picture/picture.png");

Ничего не работает. Может быть, проблема в том, что код не вызывается?

Answer 1

Уточнение

Доступ к элементам в JS обычно получают с id. Потом находят с помощью document.querySelector('#id').
Преимущество img и HTMLImageElement в том, что у него есть свойство src и не надо трогать setAttribute.
При изменении свойства src картинка обрабатывается снова и меняется. Доказательство:

document.querySelector(`button#change`).addEventListener(`click`, (event) => {
  document.querySelector(`img#view`).src = `https://imgur.com/Qo9CV22.png`;
  event.target.innerText = `Я изменил реальность`;
}, { once: true });

<img id="view" src="https://imgur.com/tFKEYxv.png" style="width: 150px;" />
<br />
<button id="change">Я меняю реальность</button>

То, что у вас не работает - другая причина. Посмотрите на пример, исправьте у вас.

БЛОГ НА HUSL

Замена src в img на другое значение через JS

Ответы (1 шт):

Уточнение