JavaScript加载通知图标失败：如何解决图片不显示问题

核心问题分析 #

你遇到的图片不显示问题，主要源于两个关键点：

• 前端JavaScript无法识别服务器端的~/路径符号，浏览器会将其作为URL的一部分直接请求，导致找不到图片资源。
• 拼接的HTML标签存在未闭合情况（<a>、包裹通知内容的<span>），会导致DOM结构混乱，间接影响元素渲染。

具体修复步骤 #

1. 修正图片路径 #

把~/替换为浏览器能识别的路径格式：

• 如果网站根目录对应域名根路径，使用根相对路径（开头带/）：

  <img src="/Theme/production/images/Annon.png"/>
  

• 如果当前页面位于子目录中，使用相对路径（根据实际目录层级调整../的数量）：

  <img src="../Theme/production/images/Annon.png"/>
  

2. 修复未闭合的HTML标签 #

原代码中<a>标签和包裹value.Ndetails的<span>都没有闭合，修正后：

$("#menu1").append('<li> <a> <span class="image"><img src="/Theme/production/images/Annon.png"/> </span> <span>' + value.Ndetails + '</span></a> </li><hr/>');

（注意给image类名加上引号，避免潜在语法问题）

3. 完整修正后的代码 #

function LoadData() {
  $('#menu1').empty();
  $('#menu1').append($('<li> Loading.. </li>'));
  $.ajax({
    type: 'GET',
    url: $("#Get").val(),
    dataType: 'json',
    data: {},
    success: function (data) {
      if (data.Success == true) {
        $('#menu1').empty();
        if (data.listNoti.length == 0) {
          $('#menu1').append($('<li>There is nothing to show </li>'));
        }
        $("#notiCount").empty();
        $("#notiCount").append(data.listNoti.length);
        $.each(data.listNoti, function (index, value) {
          // 修正路径和标签闭合问题
          $("#menu1").append('<li> <a> <span class="image"><img src="/Theme/production/images/Annon.png"/> </span> <span>' + value.Ndetails + '</span></a> </li><hr/>');
        });
        $("#menu1").append('<li><button onclick="ClearNotifications();" style="border:none;background-color: transparent;"><i class="fa fa-refresh"></i> Clear All Notifications</button></li>')
      }
    }
  });
}

（同时修复了if (data.Success == true)后的大括号缺失问题，原代码会导致逻辑错误）

额外排查点 #

• 确认图片文件确实存在于指定路径下，文件名（包括大小写）完全匹配
• 检查服务器是否允许访问该图片目录的静态资源
• 打开浏览器开发者工具（F12）的网络面板，查看图片请求的状态码，如果是404说明路径仍有问题

内容的提问来源于stack exchange，提问作者Dev Beginner