解决img标签src自动添加chat前缀引发的404资源不存在问题

问题原因 #

当前页面路由为/chat/message-list，使用相对路径images/message-list/${iconIllus}时，浏览器会自动将其解析为当前路由的子路径（即/chat/images/message-list/xxx.svg），但你的图片实际存储在项目根目录的public/images/message-list/下，因此出现404错误。

解决方案 #

方法1：改用绝对路径（最简单直接） #

修改convertJsonToHtml函数中img标签的src，在路径前添加/，让浏览器从网站根目录开始查找资源：

function convertJsonToHtml(json) { 
    var html = '';
    var userRooms = json.data.userRooms.data;
    userRooms.forEach( userRoom => {
        var typeKind = '';
        var setIcon = {
            TICKET: "ticket-icon-pc.svg",
            CONTENT: "guzu-icon-pc.svg",
            PROFILE: "profile-icon-pc.svg",
        };
        var iconIllus = '';
        if (userRoom.type == 'TICKET') {
            typeKind = 'チケット';
            iconIllus = setIcon.TICKET;
            
        } else if (userRoom.type == 'CONTENT') {
            typeKind = 'コンテンツ';
            iconIllus = setIcon.CONTENT;
        } else {
            typeKind = 'プロファイル';
            iconIllus = setIcon.PROFILE;
        }
        // 路径前添加/，改为绝对路径
        html += `
       <img class="message-list_icon" src="/images/message-list/${iconIllus}">`;
    });
    return html; // 必须补上return语句，否则无法返回生成的HTML
}

方法2：利用Laravel全局URL变量（更规范的Laravel方案） #

在页面的Blade模板中注入网站根URL全局变量：

<script>
    window.baseUrl = "{{ url('/') }}";
</script>

然后在JS函数中使用该变量拼接路径：

html += `
<img class="message-list_icon" src="${window.baseUrl}/images/message-list/${iconIllus}">`;

额外注意事项 #

• 确认图片确实存放在public/images/message-list/目录下，文件名与代码中的定义完全一致（比如guzu-icon-pc.svg）。
• 原convertJsonToHtml函数缺少return html;语句，这会导致生成的HTML无法传递给调用者，必须补充才能正常渲染内容。

内容的提问来源于stack exchange，提问作者Thế Hiển