Почему при указании пути, картинка не выводиться в js?
Всем доброго!
Есть классный слайдер:
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.
В чём может быть проблема?
Дополнительно:
Ответы:
Оно работает с содержимым изображения на низком уровне, это ради безопасности запрещено для картинок с чужого домена(кроме тех, для которых это явно разрешено со стороны сервера загловком access-control-allow-origin).
Если слайдер и картинки будут храниться на одном и том же сайте - проблем не будет. Иначе - надо настраивать access-control-allow-origin на сервере отдающем картинки, или, если картинки чужие, делать свой прокси-сервер.
- Так этот чувак же со своего сервера заливает:
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 картинка не выводилась. - koh777, ещё раз: если и картинка и слайдер находятся на одном домене - все будет рабортать, если нет - надо дополнительно морочиться.
Да, "этот чувак" заливает со своего сервера, ну так и слайдер у него на том же своём сервере - atuin.ru.Ты же экспериментируешь на codepen, соответственно слайдер там на домене codepen, а картинку ты берёшь откуда-то из другого места.
Картинка же с imgur работает потому, что imgur как раз заморочился с дополнительными разрешениями:
Первый раз сталкиваюсь с такой проблемой.
Я объяснил почему: этот слайдер работает с картинкой на низком уровне, т.е. имея доступ побайтово к самой картинке, а не только показывая её средствами браузера. Почему это важно? Потому что злоумышленник может подключить например картинку с какой-то твой личной информацией с сайта банка. Если он её просто покажет - ничего страшного, а вот если он её прочитает и вытащит оттуда информацию - это уже угроза.
- Aetae, так я не с codepen экспериментировал, а просто с компа. Но спасибо тебе, после твоих слов я попробовал залить себе на сервак и всё заработало!
https://regmed-global.com/slides.php
- koh777, про "просто с компа" вообще забудь, там столько ограничений, причём недокументированных, что даже пытаться разбираться нет никакого смысла. Даже проверяя локально - запускай локальный же сервак. Какой-нить alive-server или встроенный в IDE.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы корректно отобразить изображение в JS, необходимо указать правильный путь к файлу изображения. При указании пути к изображению в JS следует учитывать следующие моменты:
1. Проверьте, что путь к изображению указан правильно. Путь должен быть относительным или абсолютным в зависимости от структуры вашего проекта. Например, если изображение находится в том же каталоге, что и ваш скрипт JS, то путь должен быть указан просто как "image.jpg". Если изображение находится в другом каталоге, то путь должен быть указан относительно расположения скрипта, например "../images/image.jpg".
2. Убедитесь, что изображение существует по указанному пути. Если изображение было перемещено, переименовано или удалено, то JS не сможет его отобразить.
3. Проверьте права доступа к изображению. Убедитесь, что файл изображения доступен для чтения из скрипта JS.
Пример кода на PHP, демонстрирующий правильное использование пути к изображению в JS:
<title>Display Image using JavaScript</title> <img id="myImage" src="image.jpg" alt="My Image"> var img = document.getElementById('myImage'); img.src = 'image.jpg'; // Путь к изображению<title>Display Image using JavaScript</title> <img id="myImage" src="image.jpg" alt="My Image"> var img = document.getElementById('myImage'); img.src = 'image.jpg'; // Путь к изображению
Следуя этим рекомендациям, вы сможете успешно отобразить изображение в JS, убедившись в правильности указания пути к файлу изображения.