在 js 中从 json 文件中获取消息和图像

Question

我是 JavaScript 的新手，也是 json 的新手。我创建了一个代码，我想在其中从 json 文件中获取消息和图像。我能够获取消息，但无法获取图像。

我在 json 文件中提供了 URL 个图像。

这是我的js代码：

fetch('http://localhost/chats.json').then(function(response){
      return response.json();
      console.log(response.json());
    }).then(function(json){
          console.log(json);

        json.message.forEach(function(item){   

        var li=document.createElement("li");
        var img=document.createElement("img");

        img.src=item.url;
        img.width="100px";

        var text=document.createTextNode(item.msg);
        li.appendChild(text); 
        li.appendChild(img);

        document.getElementById('line').appendChild(li);
        $("ul>li").each(function(i,val){
          $(this).css("color",i & 1? "#FF8000" : "#8080C0");
        })

      })
    }).catch(function(error){
      window.alert('There has been a problem with your fetch operation: ' + error.message);
    })

这是我的 json 文件：

{ 
  "message":
    [
      { 
        "user": 1,
        "msg_id":1,
        "msg": "Hello, how are you?",
        "url": "http://placehold.it/600/6dd9cb"
      }
    ]
}

Edit-1 这里是 html:

<!DOCTYPE html>

<div class="container div" style="position: absolute;">
    <h2 class="panel-heading out" style="margin-right: 50px;">User1</h2>
    <div class="panel panel-primary">
      <div class="panel-body"> <ul id="line" style="list-style: none; font-family: Helvetica Neue"><img id="image_li"></ul> </div>
    </div>

  </div>

Answer 1

这是显示图像的正确答案。感谢 user:5053002.

 var json = { "message":
[
  { 
    "user": 1,
    "msg_id":1,
    "msg": "Hello, how are you?",
    "url": "https://placehold.it/600/6dd9cb"
  }
]};   json.message.forEach(function(item) {

var li = document.createElement("li");
var img = document.createElement("img");

img.src = item.url;
img.width = "100";

var text = document.createTextNode(item.msg);
li.appendChild(text);
li.appendChild(img);

document.getElementById('line').appendChild(li);
$("ul>li").each(function(i, val) {
    $(this).css("color", i & 1 ? "#FF8000" : "#8080C0");
})   })

谢谢你——Jaromanda X

在 js 中从 json 文件中获取消息和图像

Fetching message as well as image from json file in js

javascript

json

fetch