Как поменять тег src у img?

Question

[vadimkravchenko0]

У меня очень глупый вопрос, для кого то. Но я совсем чайник в кодах, мне это и не нужно. Но мне нужно поменять значение SRC у IMG на чужом сайте, что бы отображалась другая картинка.
Там есть на сайте игра, в которой можно перемещаться между локациями, и эти локации мне нужно поменять, их изображение.
Мне нужно просто заменить SRC. Какой код использовать? Пожалуйста, помогите чайнику.

Comments

[Андрей]

нужно чтоб из вашего браузера эта игра открывалась с измененным изображением? или что?

[vadimkravchenko0]

Андрей, Это сайт, да, что бы с моего браузера он открывался с измененным изображением нужного мне элемента.

Answer 1

[Somewhere Intech]

Можно открыть коносль ( Ctrl + Shift + i ) и вставить код

document.getElementsByClassName('background loaded')[0].src = 'https://new.url/photo';

Comments

[vadimkravchenko0]

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

[Павел Корнилов]

vadimkravchenko0, так оберните этот код в тег script и сохраните с кодом шаблона.

<script>
document.getElementsByClassName('background loaded')[0].src = 'https://new.url/photo';
</script>

[vadimkravchenko0]

Павел Корнилов, Извините за тупость, но можете объяснить фразу "и сохраните с кодом шаблона".
И ещё, у элемента есть тэг "alt" все локации имеют имя Background Loaded, но у них разный alt, так куда в коде пихать этот Альт?

[Павел Корнилов]

vadimkravchenko0, сохранять в обычном html сайта. Там, где у вас вся вёрстка.
Alt - это атрибут тега src, а не тег. При смене адреса изображения указанным способом он останется прежним.

[vadimkravchenko0]

Павел Корнилов, О господи, мне стыдно .-.
О какой верстке сайта идет речь? У меня есть только расширение для вставки JavaScript или CSS, я пытаюсь изменить чужой сайт, что бы мне только было видно. И никуда этот скрипт не подходит, пожалуйста, объясните еще раз, у меня есть расширения для вставки своих JavaScript'ов и CSS, Stylish ещё, мне нужно изменить там это значение src...

[Павел Корнилов]

vadimkravchenko0, блин, я не понял, что речь о чужом сайте.
Есть в Мозилле отличный встроенный инструмент для записи-сохранения-запуска своих скриптов на чужих сайтах - https://developer.mozilla.org/ru/docs/Tools/%D0%A7...

[Somewhere Intech]

vadimkravchenko0, могу сваять расширение, если это хром или опера(для других - лень разбираться) - скиньте адрес сайта и (если код выше проканывает, т.е. нет других img с классом "background loaded", ссылку на новое изображение

[vadimkravchenko0]

Вообще на этот сайт нужна регистрация, я сам сижу с аккаунта сестры (я для неё редактирую, пытаюсь).
Сверху никаких изображений с классом background loaded в коде нет.
Вообще там устроен сайт так, что есть локации, среди которых можно перемещаться, каждая локация имеет

<img _ngcontent-c30="" class="background loaded" alt="Рекреация" src="https://assets3.sladkiiflirt.ru/place/web/high/3-030e3bada6b6436a~1529333319.jpg" title="">

Но они различаются значением alt, src, и ngcontent, всё. Их класс "background image" остается.
Поскольку сайт с регистрацией, могу скинуть нужные элементы.
Буду вам ОЧЕНЬ благодарен, если вы мне поможете с этой проблемой, честно.

[Somewhere Intech]

vadimkravchenko0, чтобы не терять время - скиньте url из вкладки где нужно менять изображение(чтобы скрипт запускался только на ней или этом сайте) и ссылку на новое изображение.

[vadimkravchenko0]

Johnny Lowhunter, ссылка на новое изображение: https://i.imgur.com/Mxmabrr.jpg

Извините за тупость, но... Что я конкретно должен вам кинуть? Адрес страницы, на которой скрипт запускается ну и вообще работает?
https://www.sladkiiflirt.ru/s1/story
Вот, надеюсь это правильно.

[Somewhere Intech]

vadimkravchenko0, https://drive.google.com/file/d/1umlV_JymwNg7J4TLj...
Ставить проще - chrome://extensions -> справа вверху "Вкл. режим разработчика" -> Слева вверху "загрузить распакованное решение" -> Выбрать папку Chrome Extension (разархивированную конечно же).
Набросал на скорую руку, возможны ошибки, если что пишите.
P.S. может кому ещё пригодится как пример...

[vadimkravchenko0]

Johnny Lowhunter, Блин, не работает. Так и осталось, все установил, поставил, значок расширения появился, но на сайте ничего не изменилось, так это src и осталось. Может, это невозможно? Ну, может сайт сам как то каждый раз подргружает, обновляет нужное изображение? Не сработало... :c
Пытался открыть скрипт на компе, но там выдает ошибку, мол, во второй строке в символе 6 предполагается наличие ";"
И, не знаю, поможет ли это, но вот на что ругается сам гугл:

[Somewhere Intech]

vadimkravchenko0, исправил
https://drive.google.com/file/d/11yPmLCS7HHvHCmJcB...
Там нужно хоть раз ввести ссылку на новое изображение(когда кликните на иконку расширения)

[vadimkravchenko0]

Johnny Lowhunter, И опять нет... Гугл ругается на некоторые ошибки

____________________________________________________________________________________________________



Прошу прощения за это всё :c

[Somewhere Intech]

vadimkravchenko0, Извиняюсь.. Дошли руки - протестил на другом сайте - теперь работает, проверьте пожалуйста. Ссылку обновил.
https://drive.google.com/file/d/1umlV_JymwNg7J4TLj...

[vadimkravchenko0]

Johnny Lowhunter, Эх, и снова нет.
В коде у строки поменялся немного адрес, не знаю, поможет ли вам это, но


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

Answer 2

[Иван Фронтендов]

В Гугле вбить "js изменить src картинки" - результатов полным полно с решением

Comments

[vadimkravchenko0]

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

Answer 3

[Андрей]

вам нужно расширение браузера tampermonkey или любое другое подобное (usersript)
и в скриптах к странице с игрой прописывать замену картинки следующим образом в вашем случае

document.querySelector("img.background.loaded").src = 'ссылка до картинки';

и так для каждой картинки

Comments

[vadimkravchenko0]

И опять что то не получается... Может, я криворукий? Я сделал все, как вы сказали, но не сработало. По крайней мере, только этот скрипт.

[Андрей]

vadimkravchenko0, пришлите скрипт который написали и адрес сайта

[vadimkravchenko0]

По поводу сайта, там нужна регистрация, я сижу с аккаунта сестры, я для неё это делаю, если что могу скинуть оттуда.

[Андрей]

vadimkravchenko0, ну там много чего может быть. нужно уже разбираться в конкретном случае. но направление вот такое

Answer 4

[Interface]

vadimkravchenko0, проблема в том, что вы обратились не совсем на тот ресурс. Точнее скорее всего нужного вам ресурса просто нет. Потому что все вопросы и проблемы можно условно разделить на 2 категории:
- общие вопросы
- конкретные задачи

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

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

У вас есть 2 пути:
- разбираться самостоятельно, изучая материалы и т. д. (тогда забудьте про "Но я совсем чайник в кодах, мне это и не нужно.")
- либо обратиться на фриланс (это может быть и друг, который шарит и может помочь за шоколадку)

Если я правильно понял проблему, вам должен помочь user-script. Установите себе greasemonkey (расширение браузера), например. И напишите и добавьте туда свой user-script. Скрипт вам уже написал Johnny Lowhunter

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

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

Answer 5

[Stalker_RED]

Самый простой способ - https://chrome.google.com/webstore/detail/resource...