Эффективный способ изменить изображение тега img без редактирования HTML?

Question

У меня есть страница, которая показывает результаты поиска загружаемых файлов. Рядом с каждым результатом поиска у меня есть значок, обозначающий тип файла следующим образом:

<img src="/icons/ugly/powerpoint.gif" />

Я хочу изменить /icons/ugly/powerpoint.gif на /icons/pretty/powerpoint.gif, но мне не разрешено изменять HTML. Как лучше всего использовать /icons/pretty/powerpoint.gif вместо /icons/ugly/powerpoint.gif?

У меня была идея использовать javascript для этого после загрузки страницы, но не уверен, что это хорошая идея.

Answer 1

Существует два варианта, если вы не можете редактировать HTML.

1) На стороне сервера измените полученное изображение, возможно, с помощью перезаписи URL.

RewriteRule ^(.*)/ugly/(.+\.gif)$ $1/pretty/$2 [L]

2)На стороне клиента измените атрибут src, используя JavaScript, или какой-нибудь библиотечный инструмент поверх JavaScript, например, jQuery.

Код jQuery для обработки всех изображений для достижения этой цели:

$('img').attr('src', function(i, src) {
   return src.replace(/\/ugly\//, '/pretty/');
});

Answer 2

Вы можете запустить этот скрипт после загрузки DOM, но вы будете загружать оба изображения, что неэффективно:

var imgList = document.getElementsByTagName('img').
    img,
    src;

for(var i = 0; i < imgList.length; i++) {
    img = imgList[i];
    src = img.src;
    img.src = src.replace(/\/ugly\//, '/pretty/');
}

Answer 3

Вы должны сделать это, используя Javascript / Jquery. Jquery - более простой вариант. Просто посмотрите .attr() примеры на официальном сайте Jquery и измените исходный путь к изображению.

Answer 4

Переместить pretty/powerpoint.gif в ugly/powerpoint.gif

Answer 5

Если вы хотите изменить его после анализа html, без перезагрузки страницы, ваш единственный вариант - использовать JavaScript для изменения атрибута src вашего изображения.

Предположим, ваше изображение имеет идентификатор'myimage'.

document.getElementById('myimage').setAttribute('src', '/icons/pretty/powerpoint.gif');

Таким образом, ваше изображение будет иметь новый источник и будет загружать и отображать новое изображение вместо предыдущего.

В любом случае, если у вас много изображений стот же самый src, как вы сказали, вы должны использовать пустые HTML-элементы, такие как div, и назначить одно и то же фоновое изображение каждому с помощью css.Затем вы можете изменить фоновое изображение, отображаемое с помощью JavaScript.

Таким образом, вам нужно указать URL вашего изображения только один раз для всех изображений одного типа (или класса).

Answer 6

Да, вы можете использовать JavaScript, чтобы изменить источник любого изображения. Сначала необходимо определить, какое изображение, используя идентификатор или имя класса.

document.getElementById('img1').src='....new value';

Answer 7

Единственный способ сделать это - использовать JavaScript, другого пути нет. С помощью JavaScript вы можете манипулировать DOM и изменять атрибут src объекта img. Строго говоря, вы изменяете не HTML-код, а внутреннее представление HTML-кода в браузере.

var picture = document.getElementById("picture"); 
picture.src = "new_picture.jpg";

Убедитесь, что у ваших целевых img есть уникальный идентификатор - он не нужен, но облегчает поиск сущностей.