как поменять картинку 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 ;
Наведи на курсор на изображения:



