使用$.get获取JSON数据追加到HTML元素显示图片失败求助

看起来你已经走对了大半路——JSON能加载说明请求环节没问题，那问题大概率出在选择器、数据遍历/渲染逻辑，或者路径细节上。我帮你梳理几个最可能的坑和修复方案：

1. 目标元素选择器写错了！ #

你代码里的$('photos')是在选择<photos>自定义标签，但几乎没人会这么用。通常我们会给图片容器加id="photos"，所以正确的选择器应该是**$('#photos')**（加#表示按ID选择元素）。

先确认你的HTML里有对应的容器：

<div id="photos"></div>

如果选择器不对，就算渲染了HTML也没地方挂载，自然看不到页面变化。

2. JSON结构是对象而非数组，遍历方式要调整 #

你的JSON结构是{"photos": {"1": {...}, "2": {...}}}——photos是键值对对象，不是数组。如果用数组的遍历逻辑，会直接跳过内容。

试试这样遍历并渲染：

$.get('photoData.json', function(data) {
  // 先拿到正确的容器
  const $photosBox = $('#photos');
  
  // 遍历photos对象里的每一项照片数据
  $.each(data.photos, function(photoId, photoInfo) {
    // 创建图片链接和图片元素
    const photoLink = $('<a>').attr('href', photoInfo.href);
    const photoImg = $('<img>')
      .attr('src', photoInfo.src)
      .attr('alt', `Photo ${photoId}`); // 加alt属性更符合网页标准
    
    // 把图片放进链接，再追加到容器里
    photoLink.append(photoImg);
    $photosBox.append(photoLink);
  });
});

3. 图片路径是否真的正确？ #

虽然JSON加载正常，但图片的相对路径是相对于HTML页面的位置，不是相对于JSON文件的位置！比如：

• 如果HTML在根目录/index.html，JSON在/photoData.json，图片在/photos/photo1.JPG，那./photos/photo1.JPG是对的；
• 如果HTML在子目录/pages/gallery.html，那路径应该改成../photos/photo1.JPG（往上跳一级目录）。

可以直接在浏览器地址栏输入图片的完整路径（比如http://你的网站地址/photos/photo1.JPG），看能不能打开图片——如果打不开，就是路径问题。

4. 有没有CSS把元素隐藏了？ #

有时候控制台没报错，但图片/容器被CSS意外隐藏了：比如display: none、opacity: 0、visibility: hidden，或者容器高度设为0。可以打开浏览器开发者工具（F12），查看#photos容器和里面的img元素，检查它们的样式和布局是否正常。

内容的提问来源于stack exchange，提问作者Dean Coulstock