从 json 文件中附加 < IMG > 标签和 `src`，在 html 中显示为文本并且不显示照片

Question

带有来自 JSON 文件的 src 路径的附加图像标签显示不正确。 如控制台中所见，它附加到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

目前，您将 append 一个普通的 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>