#javascript #dom
Вопрос:
в настоящее время практикуюсь с API и работаю над проектом по созданию макета веб-сайта Pexels. Возникли проблемы с созданием изображений, но не совсем понятно, почему они не загружаются.
let response = JSON.parse(request.responseText); let photoURL = response.photos.map(function (photo) { return photo.url; }); console.log(photoURL); const imagesContainer = document.querySelector('.images-container'); imagesContainer.innerHTML = ``; photoURL.forEach(photo =gt; { const imageDiv = document.createElement('div'); imageDiv.classList.add('image-div'); imageDiv.innerHTML = ` lt;img class="created-image" src=${photo}gt; `; imagesContainer.appendChild(imageDiv); }); photoURL-это массив всех URL-адресов изображений, просто пытающийся запустить на нем файл forEach, чтобы прикрепить src и добавить в контейнер изображений. Кажется, все работает/добавляется, как и планировалось, но изображения не загружаются. Если я посмотрю в консоли разработчика chrome, изображения даже будут иметь атрибут src со ссылками, которые, если я скопирую вставку, действительно будут работать в браузере.
Комментарии:
1. Приведенный выше код отлично работает в моих тестах, так что, похоже, проблема кроется в другом. К сожалению, нам не так уж много предстоит сделать. Я бы предложил проверить стили изображений (есть ли отображение: нет, правильны ли ширина и высота и т. Д.)
2. В настоящее время в консоли появляется ошибка с надписью «Блокировка чтения из разных источников (CORB) заблокировала ответ из разных источников lt;URLgt; с помощью текста/html типа MIME», вероятно, это просто проблема API? Повторяется 15 раз, по одному разу для каждого полученного изображения. В настоящее время для оформления изображений я только начинал с базовых заполнителей изображений, которые занимали 33% их общего контейнера, и каждое изображение было настроено на 100% каждого div. Отображение нет неактивно или что-то еще….вещи создаются и добавляются (отображается значок, который вы получаете для неустановленного изображения), но не само изображение
3. У вас есть пример
photo.urlдля одного из них?4. URL, который у вас есть, возвращает HTML, а не изображение
5. Как упоминал @epascarello, эти URL-адреса относятся к HTML-страницам, а не к реальным изображениям, поэтому браузер не отображает их в
imgтеге.