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

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> 

我的第一个问题是：

1. 如果我使用网络路径，它的工作原理。 但是它只显示第一个图像，没有加载其他图像。

2. 因此，我使用localStorage来使用本地映像路径，但它不起作用。它显示此错误：

   GET http：// localhost：8080 / undefined 404（未找到）

3. 问题3是，它没有设置image.nad的边框半径，显示此错误：

   未捕获的TypeError：无法读取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

在小提琴上查看更新的代码

   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])
}