Добавленный тег <IMG>с `src` из файла json, отображается в формате html в виде текста и не отображает фотографии

Question

Тег добавленного изображения с путем src из файла JSON отображается неправильно. Как видно из консоли, к тегу div добавляется:

<div id="photoContainer" ></div>
"<img src=photos/43432424.jpg id=img1>" ( just string with "" ) 
"<img src=photos/43432424.jpg id=img1>" 
"<img src=photos/43432424.jpg id=img1>" 

изображение можно увидеть здесь: https://jefrey12212445.imgur.com/all/

    <div id="photoContainer"></div>


`    <script>
     let photoContainer = $('#photoContainer');
     function renderImages(data) {
     data.forEach(function (item) {
        photoContainer.append(`<img id=${item.id} src=${item.location}>`);
        })

    };`

    `$.getJSON("/json/photos.json", function (data) {
    renderImages(data);
    });`

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

Answer 1

В настоящее время вы добавляете обычную строку js в dom. Чтобы создать новый элемент в jquery, вы можете использовать, например, $("<div />").

Для получения дополнительной информации, пожалуйста, посмотрите здесь

let photoContainer = $('#photoContainer');

const renderImages = data =>
  data.forEach(item => {
    const newEle = $(`<img id=${item.id} src=${item.location} />`)
    photoContainer.append(newEle);
  })
  
//$.getJSON("/json/photos.json", renderImages);
// Fake API

const fakeGetImage = (_, callback) => callback([
  {
    id: "pic1",
    location: "https://picsum.photos/id/766/200/200"
  }
])

fakeGetImage("url", renderImages)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="photoContainer"></div>