Как изменить src через js
Перейти к содержимому

Как изменить src через js

  • автор:

Javascript как изменить src (путь) изображения

Src позволяет задать элементу путь к контенту. Самый простой способ его изменить (без jQuery), это указать явно:

‘myImage’ src= ‘/1.png’ />

document.getElementById( «myImage» ).src= «/2.png» ;

Сразу для нескольких элементов:

‘myImage1’ src= ‘/1.png’ />

‘myImage2’ src= ‘/1.png’ />

‘myImage3’ src= ‘/1.png’ />

window.addEventListener( «load» , function load() <

var imgs=[ «myImage1» , «myImage2» , «myImage3» ];

imgs.forEach( function (elementId)<

document.getElementById(elementId).src= ‘/2.png’ ;

С помощью jQuery:

$( «.myImages» ).attr( «src» , «/1.png» );

С помощью jQuery при наведении:

‘myImages’ src= «/images/news/130—15-09-17—11-28-00.jpg» style= «width: 50%» />

‘myImages’ src= «/images/news/104-lovely-mountain.jpg» style= «width: 50%» />

$( «.myImages» ).on( «mouseover» , function (event) <

var img1 = «/images/news/130—15-09-17—11-28-00.jpg» ;

var img2 = «/images/news/104-lovely-mountain.jpg» ;

$( this ).attr( «src» ) ===img1 ? img2 : img1

event.preventDefault();

return false ;

Наведи на курсор на изображения:

Изменить атрибут src тега img

var test = $(‘img’).attr(‘src’).replace(‘www.example.ru/’, ‘/’); $(‘img’).attr(‘src’, test); Сделал так, отработало, однако все картинки стали одинаковыми. Можно ли как нибудь доработать этот код?

26 июн 2016 в 10:08

через id используя jquery я могу сделать, но как поменять сразу у всех сооброжалки не хватает.

можно добавить класс «classname123» у каждого такого элемента и тогда

var a=document.getElementsByTagName("img"); for(i=0;i > 

Отслеживать
ответ дан 26 июн 2016 в 8:49
432 5 5 серебряных знаков 15 15 бронзовых знаков

У всех тегов в документе поменять в атрибуте src подстроку можно примерно так:

Array .prototype .forEach // спасибо @Grundy .call( document.getElementsByTagName('img'), function(e) < e.src = e.src.replace(/(https?:\/\/)?www.example.ru\/?/ig, ''); >) ;
 
Стенд и картинки для уголка безопасности Пожарная безопасность в школе

В вашем вопросе код для замены находится внутри тега textarea , что делает весь этот html просто-текстом. Тогда менять нужно регуляркой, включающей в себя src= , и, опционально, проверкой, что строка «src» находится внутри «тега» . Без лишних проверок:

var el = document.getElementById("content"); el.innerHTML = el .innerHTML .replace(/(src="https://ru.stackoverflow.com/questions/538654/)www.example.ru/ig,"$1") ;
 
Стенд и картинки для уголка безопасности Пожарная безопасность в школе

Курсы javascript

Доброго времени уважаемым гуру js.
Скажем есть тег img с неким src. Страница загружается, картинка браузером кэшируется. Далее программно заменяем scr на другую картинку. Понятно, что при перезагрузке, появится новая картинка. А можно ли заставить движок заменить картинку из кэша на новую без перезагрузки страницы?

27.08.2018, 21:31

Регистрация: 27.05.2010

Сообщений: 33,072

atanov,
localStorage

27.08.2018, 21:39

Регистрация: 27.06.2016

Сообщений: 180

А поподробнее

27.08.2018, 21:53

Регистрация: 27.05.2010

Сообщений: 33,072

atanov,
а макет?

27.08.2018, 22:09

Регистрация: 02.01.2010

Сообщений: 6,495

Я так понял заменяете вы на сервере?
Тогда:

img.src = img.src.replace(/(?:\?.*)?$/, '?' + +new Date);

Если сервер посылает заголовки no-cache, то и просто

img.src = img.src;

должно сработать.

__________________

27.08.2018, 22:19

Регистрация: 27.05.2010

Сообщений: 33,072

видимо я неправильно понял вопрос.

27.08.2018, 22:42

Регистрация: 02.01.2010

Сообщений: 6,495

рони, а может и я, кто знает.

__________________

27.08.2018, 23:34

Регистрация: 01.12.2016

Сообщений: 3,650

   

28.08.2018, 10:04

Регистрация: 27.06.2016

Сообщений: 180

img.src = img.src.replace(/(?:\?.*)?$/, '?' + +new Date);

Если сервер посылает заголовки no-cache, то и просто

img.src = img.src;

Да, заменяю картинку на сервере (или новую вставляю) ajax’ом + ещё изменяю информацию в бд. Далее возвращаю из бд уже изменённую инфу и json’ом отправляю обратно на клиент. json на клиенте распарсиваю и вставляю в соответствующие места, а src картинки просто подменяю. Вот в примере j0hnik это прекрасно работает, у меня только после перезагрузки

Как изменить data-src через js?

Как правильно прописать скрипт чтобы он изменял data-src у картинки?

Есть такой скрипт. Который изменяет src у картинок находящихся в div блоке с классом .comics

$('.comics img').each(function()< if(this.src.indexOf('https://domain.ru')!=-1)< this.src=this.src.replace('https://domain.ru','http://anotherdomain.ru/blalbla/blalbla/'); >;

Я подключил ленивую загрузку lazyload и теперь мне нужно чтобы скрипт менял data-src вместо src.

  • Вопрос задан более трёх лет назад
  • 984 просмотра

Комментировать
Решения вопроса 1
Stockholm Syndrome @StockholmSyndrome

$('.comics img').each(function() < $(this).attr('data-src', 'new data-src value'); >);
$('.comics img').each(function() < let src = $(this).attr('data-src'); $(this).attr('data-src', src.replace('https://domain.ru', 'https://anotherdomain.ru/blabla/blabla/')); >);

Ответ написан более трёх лет назад
Нравится 1 10 комментариев
midarovrk @midarovrk Автор вопроса
А где прописывать какой домен на какой домен заменять?
Stockholm Syndrome @StockholmSyndrome
midarovrk, вместо new data-src value тот домен, на который нужно заменить
midarovrk @midarovrk Автор вопроса

StockholmSyndrome, да, в принципе работает, но он заменяет абсолютно всю ссылку на домен. А мне надо заменить часть ссылки на ту что я укажу как в скрипте через replace в стартовом посте.

Например есть картинка с ссылкой

Сейчас ваш скрипт делает так:

Т.е. полностью затирает, а не заменяет часть ссылки.
Stockholm Syndrome @StockholmSyndrome

$('.comics img').each(function() < let src = $(this).attr('data-src'); $(this).attr('data-src', src.replace('https://domain.ru', 'https://anotherdomain.ru/blabla/blabla/')); >);

midarovrk @midarovrk Автор вопроса
StockholmSyndrome, спасибо большое, то что надо =)
midarovrk @midarovrk Автор вопроса

StockholmSyndrome, а проверку на соответствие домена тоже можете добавить? У меня до этого так проверялось:

Т.е. если у ссылки другой домен, то замена не происходила.

Stockholm Syndrome @StockholmSyndrome

$('.comics img').each(function() < const DOMAIN = 'https://domain.ru'; let src = $(this).attr('data-src'); if (!src.startsWith(DOMAIN)) return; $(this).attr('data-src', src.replace(DOMAIN, 'https://anotherdomain.ru/blabla/blabla/')); >);

midarovrk @midarovrk Автор вопроса

StockholmSyndrome, спасибо. А через if нельзя? =)

У меня в общем в одном js файле 5-6 проверок на домены идёт, вот так:

$('.comics img').each(function()< if(this.src.indexOf('https://domain1.ru')!=-1)< this.src=this.src.replace('https://domain1.ru','https://anotherdomain1.ru/blabla/blabla/'); >; if(this.src.indexOf('https://domain2.ru')!=-1)< this.src=this.src.replace('https://domain2.ru','https://anotherdomain2.ru/blabla/blabla/'); >; if(this.src.indexOf('https://domain3.ru')!=-1)< this.src=this.src.replace('https://domain3.ru','https://anotherdomain3.ru/blabla/blabla/'); >; if(this.src.indexOf('https://domain4.ru')!=-1)< this.src=this.src.replace('https://domain4.ru','https://anotherdomain4.ru/blabla/blabla/'); >; if(this.src.indexOf('https://domain5.ru')!=-1)< this.src=this.src.replace('https://domain5.ru','https://anotherdomain5.ru/blabla/blabla/'); >; >);

Или ваш вариант тоже можно как-то так использовать?

$('.comics img').each(function() < const DOMAIN = 'https://domain1.ru'; let src = $(this).attr('data-src'); if (!src.startsWith(DOMAIN)) return; $(this).attr('data-src', src.replace(DOMAIN, 'https://anotherdomain1.ru/blabla/blabla/')); const DOMAIN = 'https://domain2.ru'; let src = $(this).attr('data-src'); if (!src.startsWith(DOMAIN)) return; $(this).attr('data-src', src.replace(DOMAIN, 'https://anotherdomain2.ru/blabla/blabla/')); const DOMAIN = 'https://domain3.ru'; let src = $(this).attr('data-src'); if (!src.startsWith(DOMAIN)) return; $(this).attr('data-src', src.replace(DOMAIN, 'https://anotherdomain3.ru/blabla/blabla/')); >);

Stockholm Syndrome @StockholmSyndrome
midarovrk, можно все домены собрать в массив

$('.comics img').each(function() < let domains = [ 'https://domain1.ru', 'https://domain2.ru', 'https://domain3.ru', 'https://domain4.ru', 'https://domain5.ru' ]; let src = $(this).attr('data-src'); for (let i = 0, l = domains.length; i < l; i++) < if (src.startsWith(domains[i])) < $(this).attr('data-src', src.replace(domains[i], 'https://anotherdomain.ru/blabla/blabla/')); break; >> >);

John_Paul_Jones @John_Paul_Jones

Stockholm Syndrome, Здравствуйте, подскажите пожалуйста, пытаюсь использовать lazyload (клик шариком чтобы открыть скрипт jQ в новом окне)в MUSE, тот же вопрос, как заменить src на data-src? Пытался использовать Ваш код, но не выходит что-то. Создал тему можете там написать
Руками править на хосте само собой не вариант работает только до первого экспорта.
Тестирую тут https://jsfiddle.net/bhmye0g6/
Подскажите как правильно прописывать? все в начале кода или в конце?

Ответы на вопрос 0
Ваш ответ на вопрос

Войдите, чтобы написать ответ

javascript

  • JavaScript

Как создать динамическую переменную?

  • 1 подписчик
  • 7 минут назад
  • 5 просмотров

javascript

  • JavaScript
  • +1 ещё

Почему не запрашивает разрешение на уведомление pwa-push- ios?

  • 1 подписчик
  • 2 часа назад
  • 26 просмотров

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *