Блог

Главная - Вопросы по программированию - Как правильно добавить элемент img с помощью innerHTML

Как правильно добавить элемент img с помощью innerHTML

#javascript #innerhtml

Вопрос:

Я пытаюсь визуализировать некоторые img элементы с innerHTML помощью , в некоторых случаях это работает, а в других-нет.

Фрагмент:

У меня есть две строки, визуально они имеют одинаковое содержимое, но сравнение строгого равенства ( === ) не говорит об одном и том же.

Может быть, это проблема с кодировкой? Есть ли какой-либо способ избежать строки, чтобы решить проблему?

 const html = '<h2>HTML:</h2><p>First Image:</p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" alt="Test" width="150" height="150"/> <p>Second Image: </p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" alt="Test" width="150" height="150"/>';

const htmlAux = '<h2>HTML:</h2><p>First Image:</p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" alt="Test" width="150" height="150"/> <p>Second Image: </p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" alt="Test" width="150" height="150"/>';


const div = document.getElementById("div-test");
div.innerHTML = html   htmlAux;

console.log('html == htmlAux: ', html == htmlAux)
console.log('typeof(html): ', typeof(html));
console.log('typeof(htmlAux): ', typeof(htmlAux)); 
 <div id="div-test"></div>

Комментарии:

1. </img src="http:> почему это в конце вашего содержимого innerHTML? похоже, что это МОЖЕТ быть проблемой… и я предполагаю, что ваш цикл на стороне сервера может повторяться слишком много раз… например: если у вас был массив из 3 записей с 2 изображениями, а последняя запись была пустой… и ваш код не выполняет некоторого условного тестирования… цикл может попытаться вывести пустую строку… ОДНАКО это не объясняет, почему вы, похоже, пытаетесь закрыть тег <img> с помощью <img></img>, что неверно… <img> самозакрывается… пример: <img src="http://where.com" />

2. @aequalsb Я считаю, что это связано с тем, что косые черты удаляются из строки после внутреннего набора HTML… Даже при правильном закрытии тегов ошибка сохраняется :/

3. Протестировал ваш код, и он работает без проблем. Видишь jsfiddle.net/76xcyaoq

4. @lukas.j Thx за помощь, но попробуйте скопировать фрагмент вопроса , чтобы ответить, и посмотрите console.log , idk, что вызывает это, похоже, проблема с кодировкой

5. На jsfiddle есть консоль (в правом нижнем углу). Я не вижу проблемы, которую вы описываете.

Ответ №1:

Я думаю placehold.it , что это проблема домена. Он неправильно загружается в innerHTML, но когда я использую изображение, via.placeholder.com оно работает нормально.

 const html = '<img src="https://via.placeholder.com/350x150"/>';


const div = document.getElementById("div-test");
div.innerHTML = html;

console.log("innerHTML: ", div.innerHTML); 
 <div id="div-test"/>

Комментарии:

1. Спасибо за ответ, но я считаю, что проблема не в этом, я отредактировал URL-адрес изображений в вопросе, проблема продолжается

Ответ №2:

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

 const html = '<p>First Image:</p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" alt="Test" width="150" height="150"/> <p>Second Image: </p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" alt="Test" width="150" height="150"/>';


const div = document.getElementById("div-test");
div.innerHTML = html;

//console.log("innerHTML: ", div.innerHTML); 
 <div id="div-test" />

Комментарии:

1. Спасибо за ответ, но я считаю, что проблема не в этом, я отредактировал URL-адрес изображений в вопросе, проблема продолжается

2. @Mathiasfc Я скопировал ваш ОБНОВЛЕННЫЙ код в этот jsFiddle , и он работает просто отлично. Оба изображения загружаются без каких-либо проблем.

3. У вас есть какие-либо идеи, почему в вопросе фрагмент кода не работает? Посмотрите на html-строку, они одинаковые

Ответ №3:

Проблема не в вашем js, а в вашем html-элементе. DIV не является самозакрывающимся элементом не <div id="div-test" /> делайте этого вместо этого <div id="div-test"></div>

Ответ №4:

У тебя не закрыта div бирка… когда я запускаю ваш код с div закрытым тегом, все работает нормально:

 const html = '<p>First Image:</p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" alt="Test" width="150" height="150"/> <p>Second Image: </p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" alt="Test" width="150" height="150"/>';


const div = document.getElementById("div-test");
div.innerHTML = html;

//console.log("innerHTML: ", div.innerHTML); 
 <div id="div-test" /></div>

Ответ №5:

Обнаружена проблема, пробелы внутри первого img тега на самом деле являются следующим кодом: u00A0 .

Поэтому , если я заменю все изображения u00A0 на " " , изображение будет отображаться нормально

 const html = '<h2>HTML:</h2><p>First Image:</p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" alt="Test" width="150" height="150"/> <p>Second Image: </p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" alt="Test" width="150" height="150"/>'

const htmlAux = '<h2>HTML:</h2><p>First Image:</p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" alt="Test" width="150" height="150"/> <p>Second Image: </p> <img src="https://images.pexels.com/photos/8971740/pexels-photo-8971740.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" alt="Test" width="150" height="150"/>';


const div = document.getElementById("div-test");
div.innerHTML = html.replace(/u00A0/g, " ")   htmlAux;

console.log('html == htmlAux: ', html == htmlAux)
console.log('typeof(html): ', typeof(html));
console.log('typeof(htmlAux): ', typeof(htmlAux)); 
 <div id="div-test"></div>
Метки: