来自json的图像未显示

时间:2013-06-27 10:44:09

标签: jquery json

我无法使用jquery和ajax从json中显示图像(attachments => images => full => url):

{
 "status": "ok",
 "post": {
  "id": 117,
"url": "https:\/\/domain.com\/classifieds\/%d0%bf%d1%80%d0%be%d0%b4%d0%b0%d0%bc-%d0%b0%d0%b2%d1%82%d0%be%d0%bc%d0%be%d0%b1%d0%b8%d0%bb%d1%8c\/",
"title": "\u041f\u0440\u043e\u0434\u0430\u043c \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c",
"content": "<p>\u0426\u0432\u0435\u0442 \u043a\u0443\u0437\u043e\u0432\u0430: ",
"date": "2013-06-26 10:30:06",
"modified": "2013-06-26 10:33:06",
"tags": [],
"attachments": [
  {
    "images": {
      "full": {
        "url": "https:\/\/domain.com\/wp-content\/uploads\/2013\/06\/Vw-Golf.jpg",
        "width": 650,
        "height": 433
      },
      "large": {
        "url": "https:\/\/domain.com\/wp-content\/uploads\/2013\/06\/Vw-Golf.jpg",
        "width": 650,
        "height": 433
      },
      "small": {
        "url": "https:\/\/domain.com\/wp-content\/uploads\/2013\/06\/Vw-Golf-120x79.jpg",
        "width": 120,
        "height": 79
      },
      "custom-size": {
        "url": "https:\/\/domain.com\/wp-content\/uploads\/2013\/06\/Vw-Golf-650x200.jpg",
        "width": 650,
        "height": 200
      }
    }
  }
]
 }
}

我的Jquery是:

 $.ajax({
  url: url_to_json,
  async: false,
  crossDomain: true,
  contentType: 'application/json; charset=utf-8',
  dataType: 'jsonp',
  timeout: 5000,
  success: function (data, status) {
    if (data !== undefined && data.post !== undefined) {
      $('#news').append('<div id="nimg" style="background-image: url(' + data.post.attachments[images].full.url + ')"></div><div id="newstext"><div id="newstitle">' + data.post.title + '</div><div>' + data.post.content + '</div></div>');
    }
  },
  error: function () {
    output.html('<h1 class="error">There was an error loading the data.</h2>');
  }
});

请帮助我成为JQUERY的新手。我非常感谢你的帮助。

2 个答案:

答案 0 :(得分:3)

试试:

data.post.attachments[0]['images'].full.url

或那:

data.post.attachments[0].images.full.url

答案 1 :(得分:1)

这里有两个问题

  1. 属性访问者错误,应该是data.post.attachments[0].images.full.url
  2. 网址是javascript转义的,您需要取消它.replace(/\\\//, '/')
  3. 所以它应该是

    $('#news').append('<div id="nimg" style="background-image: url(' + data.post.attachments[0].images.full.url.replace(/\\\//, '/') + ')"></div><div id="newstext"><div id="newstitle">' + data.post.title + '</div><div>' + data.post.content + '</div></div>');