Изменить IMG SRC в зависимости от класса

Question

Когда вы используете background для установки img.

Вы можете изменить img по классу

<img class=".png" style="background: url('test.png');">

.png{
    background: url('test2.png');
}

Однако при использовании src возможно ли изменить img накласс?

<img src="test.png">

Я думаю, что можно изменить src с помощью javascript, но если я могу отсортировать вещи по классам, лучше обработать.

Возможно ли это?

Answer 1

В вашем примере фон не изменится, потому что встроенный стиль имеет наивысший приоритет)
Доказательство:

.png{
  width: 170px;
  height: 170px;
  background-image: url('another.png');
}

<div class="png" style="background-image: url('https://gyazo.com/f850be7e9fc91aa2c8cb844603ea1e10.png');"></div>

Вы можете установить полностью прозрачное изображение png как src и работать с его фоном:

.set-bg {
  width: 320px; /* have to set exact sizes*/
  height: 320px;
  background-image: url('https://i.gyazo.com/fe48322c44d1c214ee8d9ba49876a0da.png');
}

<img src="invis.png" class="set-bg">

Также вы можете изменить (установить) src с помощью JavaScript. Использование:

setSrcByClass("bubu", "https://gyazo.com/c708f879e56f725318fafca74b9cbe7f.png");

function setSrcByClass(className, src){
  let elems = document.querySelectorAll("." + className);
  for( let i = 0; i < elems.length; i++ ){
    elems[i].src = src; // src must be a full adress
    
   // or, if you want to set a relative adress...
   // elems[i].setAttribute('src', src);
  }
}

<img class="bubu">
<img class="bubu">
<img class="bubu">

Answer 2

Я думаю, что это один из способов:

$("img[src='test.png'").attr("src","http://4.bp.blogspot.com/-FLnjwm6youQ/UUGhQei8KqI/AAAAAAAAAUE/nEl-5V5IcDw/s30-p/1.jpg");

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

$("img[src='test.png'").attr("class","test_img");

.test_img{padding:30px;background: #dae9bc;}

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

Извините, я не могу полностью понять ваш вопрос, поэтому я написал два фрагмента

Answer 3

Да, вы можете сделать это с помощью HTML и некоторого JavaScript (я буду использовать jQuery здесь, так как вы пометили jQuery).

Сначала вы должны добавить класс, на который хотите настроить таргетинг, с JavaScript к элементам imgчто вы хотите изменить.

А затем нацельтесь на них с помощью jQuery и измените их атрибут src на то, что вы хотите изменить на.

HTML

<img class="png" src="test.png">

JavaScript

// use jQuery to select all elements with the png class - and set the src attribute to...
jQuery('.png').attr('src', 'test2.png');