Почему при указании пути, картинка не выводиться в js?

Question

[koh777]

Всем доброго!
Есть классный слайдер:
https://codepen.io/isladjan/pen/qBqPzEX
Ставлю себе, но при замене url на картинки, они не выводятся, начиная с первой, который находиться в html:

Когда стоит https://i.imgur.com/hDB2Egy.jpg всё работает, а когда я укажу свой путь, то не выводиться.
Вот этот чувак тоже объяснил этот слайдер у себя:
https://atuin.ru/blog/slajder-prezentaciya-s-krasi...
Он там указал картинки из своего сервера, и у него всё нормально выводиться.
Я даже пытался вывести картинку из его сервера:
https://atuin.ru/demo/presents/1.jpg
Толку нет, не работает, не выводиться. Они выводиться только из указанного сайта https://i.imgur.com.
В чём может быть проблема?

Answer 1

[Aetae]

Оно работает с содержимым изображения на низком уровне, это ради безопасности запрещено для картинок с чужого домена(кроме тех, для которых это явно разрешено со стороны сервера загловком access-control-allow-origin).
Если слайдер и картинки будут храниться на одном и том же сайте - проблем не будет. Иначе - надо настраивать access-control-allow-origin на сервере отдающем картинки, или, если картинки чужие, делать свой прокси-сервер.

Comments

[koh777]

Так этот чувак же со своего сервера заливает:
https://atuin.ru/blog/slajder-prezentaciya-s-krasi...
и он там выдаёт все картинки что бы их можно было взять и залить со своего сервака. Но суть не в этом, я всё равно картинки и видосы поменяю на другие. Суть - слайдер не работает при смене url.
Я подумал в js где то прописано, что картинки будут взяты с определённого сайта, но не нашёл такого.
Вот код другого чувака, который заливает со своего сервака:
https://atuin.ru/demo/presents/presents.js
В самом js ясно написано:
webgl.texture = webgl.loader.load(document.getElementById("first").src, setup);
Первый раз сталкиваюсь с такой проблемой. И это не нормально, что бы при смене url картинка не выводилась.

[Aetae]

koh777, ещё раз: если и картинка и слайдер находятся на одном домене - все будет рабортать, если нет - надо дополнительно морочиться.
Да, "этот чувак" заливает со своего сервера, ну так и слайдер у него на том же своём сервере - atuin.ru.

Ты же экспериментируешь на codepen, соответственно слайдер там на домене codepen, а картинку ты берёшь откуда-то из другого места.

Картинка же с imgur работает потому, что imgur как раз заморочился с дополнительными разрешениями:

Первый раз сталкиваюсь с такой проблемой.

Я объяснил почему: этот слайдер работает с картинкой на низком уровне, т.е. имея доступ побайтово к самой картинке, а не только показывая её средствами браузера. Почему это важно? Потому что злоумышленник может подключить например картинку с какой-то твой личной информацией с сайта банка. Если он её просто покажет - ничего страшного, а вот если он её прочитает и вытащит оттуда информацию - это уже угроза.

[koh777]

Aetae, так я не с codepen экспериментировал, а просто с компа. Но спасибо тебе, после твоих слов я попробовал залить себе на сервак и всё заработало!

https://regmed-global.com/slides.php

[Aetae]

koh777, про "просто с компа" вообще забудь, там столько ограничений, причём недокументированных, что даже пытаться разбираться нет никакого смысла. Даже проверяя локально - запускай локальный же сервак. Какой-нить alive-server или встроенный в IDE.