Как заменить изображение без изменений HTML?

Question

Всем привет! Я полный нуб в JS и прошу помощи. Гуглил много, но видимо моих знаний не хватает. Суть такая. Есть изображение, добавленное в html и у него нет id и только class. Как я могу с помощью JS или jQuery заменить картинку Вот фрагмент html:

<div style="float: left; margin-right: 10px">
<img width="50" class="user-profile-image user-default-profile-image " src="img/default_profile_50.png"></div>

Пытался присвоить id с помощью:

function myFoo1(){document.getElementsByClassName("user-default-profile-image")[0].id = "defimage"; }

и заменять:

$('#defimage').attr('src', '/fileservice/file/download/a/233337/sc/494/h/c803022e0f37921830b75a0d243e73e0.png')

Answer 1

element.querySelector(); - найдет первый попавшийся элемент.

const image = document.querySelector('.image');

image.setAttribute('src', 'https://picsum.photos/200/300?grayscale');

<img class="image" src="https://picsum.photos/200/300" alt="#"> <!-- will be found -->
<img class="image" src="https://picsum.photos/200/300" alt="#"> <!-- will not be found -->

если картинок несколько

const images = document.querySelectorAll('.image');

images.forEach((image) => {
  image.setAttribute('src', 'https://picsum.photos/200/300?grayscale');
});

<img class="image" src="https://picsum.photos/200/300" alt="#"> <!-- will be found -->
<img class="image" src="https://picsum.photos/200/300" alt="#"> <!-- will be found -->

Answer 2

Представим ситуацию, что у нас есть сайт, на котором есть всё, а нам нужна лишь картинка.
Первое, что я бы советовал сделать, это найти её родителя, который имеет идентификатор и чем уникальнее, тем лучше.

Допустим мы нашли и это выглядит так:

<!-- ... Где-то в недрах кода -->
<div id="content">
  <h3>Как выглядит жираф</h3>
  <img width="250" border="1" src="//i.imgur.com/GClq9wY.png">
  <div>Жираф</div>
</div>
<!-- ... Где-то в недрах кода -->

Нам нужно обратиться к этому родителю по идентификатору, потом найти в нём все картинки, а после чего уже по порядковому номеру (индексу) найти именно нашу.

document // Обратимся к документу
  .getElementById('content') // Потому к родителю
  .getElementsByTagName('img')[0] // Возмём в нём первый по счёту элемент IMG
  .src = '//i.imgur.com/vsDvm4a.png' // И изменим в нём ссылку на нужную.

<!-- ... Где-то в недрах кода -->
<div id="content">
  <h3>Как выглядит жираф</h3>
  <img width="250" border="1" src="//i.imgur.com/GClq9wY.png">
  <div>Жираф</div>
</div>
<!-- ... Где-то в недрах кода -->

Если наша картинка будет не первой, а допустим десятой, то нам нужно указать .getElementsByTagName('img')[9] (9, потому что отсчёт с нуля).

В jQuery запись будет проще:

$('#content img') // Ищем IMG в родителе
  .eq(0) // Берём первую картинку 
  .attr('src', '//i.imgur.com/vsDvm4a.png'); // Меняем значение атрибута SRC на своё

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- ... Где-то в недрах кода -->
<div id="content">
  <h3>Как выглядит жираф</h3>
  <img width="250" border="1" src="//i.imgur.com/GClq9wY.png">
  <div>Жираф</div>
</div>
<!-- ... Где-то в недрах кода -->

БЛОГ НА HUSL

Как заменить изображение без изменений HTML?

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