Question

我是初学者并尝试在浏览器上使用json加载本地图像。我对此代码有3个问题：

var jsonString = '[{"1":"/models/view/css/pics/dipesh.jpg","2":"/models/view/css/pics/ashish.jpg","3":"/models/view/css/pics/prasun.jpg"}]';

localStorage.setItem("1", jsonString);
var obj = JSON.parse(localStorage.getItem("1"));
$(".player").click(function() {
  var img = new Image(150, 150);
  for (var i = 0; i < obj.length; i++) {
    img.setAttribute("src", obj[i][1]);
    document.getElementById(img).style.borderRadius = "8px";
    $("#my").html(img);
  }
})

<div class="shape" id="my"></div>

我的第一个问题是：

如果我使用网络路径工作。但它只显示第一张图片。它没有加载其他图像。
因此我使用localStorage来使用本地图像路径，但它不起作用。它显示了这个错误：

获取http://localhost:8080/undefined 404（未找到）
问题3是，它没有设置image.nad的边框半径显示此错误：

未捕获的TypeError：无法读取属性'style'的null

任何人都可以帮助我吗？提前完成。

Answer 1

您的数据是一个在第一个索引处只有一个对象的数组。而且它已经是JSON了：

var jsonString = '[{"1":"/models/view/css/pics/dipesh.jpg","2":"/models/view/css/pics/ashish.jpg","3":"/models/view/css/pics/prasun.jpg"}]';

var jsonObj = JSON.parse(jsonString);

for(var key in jsonObj[0]) {
  console.log(jsonObj[0][key])
}

Answer 2

查看fiddle

上的更新代码

   var jsonString = '[{"1":"https://www.google.co.in/images/srpr/logo11w.png","2":"https://www.google.co.in/images/srpr/logo11w.png","3":"https://www.google.co.in/images/srpr/logo11w.png"}]';
   localStorage.setItem("1", jsonString);
   var obj = JSON.parse(localStorage.getItem("1"));

   $(".player").click(function() {  
      $.each(obj[0],function(key,value){
       var img = new Image(150, 150); 
       img.setAttribute("src", value);
       img.style.borderRadius = "8px";
      $("#my").append(img);
     });
   });

Answer 3

使用$.parseJSON代替，

var jsonString = '[{"1":"/models/view/css/pics/dipesh.jpg","2":"/models/view/css/pics/ashish.jpg","3":"/models/view/css/pics/prasun.jpg"}]';
var obj = $.parseJSON(jsonString);

for(var key in obj[0]) {
  console.log(obj[0][key])
}

无法使用json从本地存储加载图像

3 个答案: