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

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

  • автор:

как поменять картинку js

Для того, чтобы поменять картинку нужно изменить атрибут src у элемента на новый путь к картинке.

 id="myImg" src="old-image.jpg" alt="Old Image">  onclick="changeImage()">Change Image function changeImage()  const myImg = document.getElementById('myImg'); myImg.src = 'new-image.jpg'; > /scirpt> 

В результате выполнения кода выше, картинка на странице будет заменена на новую.

Изменить атрибут 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
442 4 4 серебряных знака 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") ;
 
Стенд и картинки для уголка безопасности Пожарная безопасность в школе

Как указать путь изображений src в js?

Подскажите как указать относительный или абсолютный путь до картинки или какой лучше сайт временно на локалке? Потом перенесу на сайт.

пример должен быть такой

var items = ["src":"http://site.loc/wp-content/uploads/1586372332821/15863724535622-400x600.png","w":1000,"h":793,"title":" Т.к. картинки будут меняться такой вариант не подходит и имена генерируются автоматически. Пытаюсь вставить путь до картинки для плагина Photoswipe. 
  • ИксФайвИкс
  • 18/04/2020

Также, как и в теге . Указываете полный URL с http(s), либо путь относительно корня сайта (/images/. ).

  • NiceServer.ru
  • 18/04/2020

Абсолютный путь — это полный путь в адресной строке, который начинается с «http://site.loc/».
Относительный путь — это путь, который начинается за слешем имени домена, включая его, то есть «http://site.loc/wp-content/uploads/1586372332821/15863724535622-400×600.png» — будет относительный путь.

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

Комментариев: (3)

  • Автор вопроса

а как указать?? названия папок и картинок генерируются автоматически при создании профиля и загрузки картинки. то есть я не могу прописать тк они будут не известны. в этом и загвоздка

В поидее, если вы это делаете в админ-панели WP, то путь системой автоматически должен подставляться относительный.

Вы можете это проверить, перенеся сайт на другой локальный домен (не забудьте предварительно сделать копию всего сайта + дамп базы). После переноса нужно внести некоторые изменения в настройки WP и базу. Для этого смотрите уже особенности переноса WP.

  • Автор вопроса

если вы это делаете в админ-панели WP

все делается через php без WP

  • admin@flyjust.info
  • 18/04/2020

Здравствуйте, данный вид тоже подойдёт для вас:

'myImage' src='/1.png' /> 
document.getElementById("myImage").src="/2.png";

Комментариев: (4)

  • Автор вопроса

к сожалению не подходит. тк имена картинок и папок генерируются автоматически я не знаю имен.

  • admin@flyjust.info

А в документации плагина нет ответа? Может что-нибудь забыли прописать для корректной работы?

  • Автор вопроса

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

var items = [\n \n src: 'https://placekitten.com/600/400',\n w: 600,\n h: 400\n >,\n \n src: 'https://placekitten.com/1200/900',\n w: 1200,\n h: 900\n >\n];

вот примерно так. но они знают как называется папка и картинка.

$photos = get_children( array('post_parent' => get_the_ID(), 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );

делал примерно так но почему то выводятся все картинки которые есть на странице

foreach ($photos as $photo) 

мне бы относительный путь или абсолютный путь потом как нить что нить придумаю.

есть идея /wp-content/uploads/ через php указывать урл но а как проверять с какой папки открылась картинка?

  • admin@flyjust.info

Укажите путь до той папки, если не знаете какая папка, создайте картинку вручную папка создастся и посмотрите ее название, а потом уже сделаете по-своему.

Мы старались для Вас!

Рейтинги хостинг-провайдеров по задачам сайта

Хостинг по странам
Панель управления

От панели управления зависит ваше удобство в настройке хостинге\сайта.

Большинство качественных хостингов из нашего ТОПа используют удобные панели управления, поэтому рекомендуем больше внимания уделить другим параметрам при выборе.

Хостинг для
Вид хостинга

Облачный хостинг - распределение нагрузки на несколько серверов, если сервер с вашим сайтом перегружен или не работает. Это гарантия того что пользователи в любом случае смогут видеть ваш сайт. Но это дорогая, более сложная опция, которую предоставляют далеко не все провайдеры.

Виртуальный хостинг - подходит для большинства проектов начального уровня с посещаемостью до 1000 человек в сутки. В таком хостинге мощность сервера делится между несколькими хостинговыми аккаунтами. Услуга проста в настройке даже для новичков.

VPS - подходит для более сложных проектов с достаточно большой нагрузкой и посещаемостью до 10000 человек в сутки. Здесь мощность сервера фиксированная для каждого виртуального сервера, при этом сложность настройки увеличивается.

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

Размещение и обслуживание вашего собственного сервера в дата-центре хостинга - это не очень популярная услуга и требуется в исключительных случаях.

  • Облачный хостинг
  • Виртуальный хостинг
  • VPS/VDS
  • Выделенный сервер
  • Размещение сервера
  • CDN

CMS - это система управления контентом сайта. Хостеры стараются для каждой из них делать отдельный тариф или упрощать установку. Но в целом это больше маркетинговые ходы, т.к. у большинства популярных CMS нет специальных требований к хостингу, а те что есть - поддерживаются на большинстве серверов.

Тип виртуализации

Виртуализация - это создание виртуальной среды на физическом сервере, позволяющая запускать требуемые ПО без затрагивания процессов, совершаемых другими пользователями сервера. С её помощью ресурсы физического сервера распределяются между виртуальными (VPS/VDS). Основные виды: аппаратная (KVM), паравиртуализация, виртулизация на уровне ОС (OpenVZ).

Абузоустойчивый хостинг - компании, которые разрешают размещать практически любой контент, даже запрещенный (спам, варез, дорвеи, порнографические материалы). Такие компании не удаляют контент вашего веб-сайта при первой же жалобе (“абузе”).

Безлимитный хостинг - хостинг у которого отсутствуют лимиты на количество сайтов, БД и почтовых ящиков, трафик, дисковое пространство и т.д. Обычно это больше маркетинговый трюк, но можно найти что-то интересное для себя.

Безопасный хостинг - тот, где администрация постоянно обновляет ПО установленное на серверах, устанавливает базовую защиту от DDoS-атак, антивирус и файерволлы, блокирует взломанные сайты и помогает их "лечить".

Защита от DDOS - компании, которые предоставляют хостинг с защитой от DDoS-атак. Такие пакеты ощутимо дороже обычных, но они стоят своих денег, так как ваш сайт будет защищен от всех видов сетевых атак.

  • Абузоустойчивый хостинг
  • Безлимитный хостинг
  • Безопасный хостинг
  • Черный список
  • Защита от DDOS
  • Конструктор сайтов
  • Партнерские программы
  • Реселлинг хостинга

Бесплатный тест

Тестовый период - предоставляется хостером бесплатно на 7-30 дней, чтобы вы могли удостовериться в его качестве.

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

  • Тестовый период
  • Moneyback
  • VPS/VDS с тестовым периодом

Региональные

  • Регистраторы доменов
  • Домен в подарок
  • SSL-сертификаты

Настоятельно рекомендуем не покупать слишком дешевый хостинг! Как правило с ним очень много проблем: сервер иногда не работает, оборудование старое, поддержка долго отвечает или не может решить проблему, сайт хостера глючит, ошибки в регистрации, оплате и т.д.

Также мы собрали тарифы от тысяч хостеров, чтобы вы могли выбрать хостинг по конкретной цене.

  • Дешёвый хостинг
  • Дешевый VPS-хостинг
  • Цена-Качество
  • Дорогой хостинг
  • Бесплатный хостинг
  • VPS/VDS посуточно

Способы оплаты
Дата-центры
Технологии и ОС

На языке программирования PHP и базах данных MySQL сейчас работает большинство сайтов. Они же поддерживаются практически всеми современными хостингами.

ASP.NET - платформа для разработки веб-приложений от Майкрософт.

ОС - операционная система, установленная на сервере хостинга. Мы рекомендуем размещать на серверах с Linux, если нет особых требований у разработчиков сайта.

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 ;

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

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

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