JQuery追加图片URL后控制台报404错误，如何消除该错误？

问题 #

Markdown解析后的图片标签src只有文件名，没有完整URL。我用以下jQuery代码给src追加AWS S3的URL前缀后，图片能正常加载，但浏览器控制台会报404错误，还导致RRSSB这类插件无法加载。

代码如下：

$(".markdown").find("img").each(function() 
        { 
            $(this).addClass("markdown");
            $(this).attr("src", function(i, value) 
            {
                return "{{ config(\"website.aws.s3\") }}" + value;
            });
        });

图片实际存在，现在只需要解决控制台的404报错问题。

解决方案 #

方法1：先清空原始src再设置完整地址 #

浏览器会在DOM加载完成后立刻请求原始的仅含文件名的src，这就是404的根源。可以先把src清空，避免浏览器发起错误请求，再设置完整URL：

$(".markdown").find("img").each(function() {
    const $img = $(this);
    const originalFileName = $img.attr("src");
    // 先清空src，阻止浏览器请求错误地址
    $img.attr("src", "");
    $img.addClass("markdown");
    // 拼接完整URL后赋值
    $img.attr("src", "{{ config(\"website.aws.s3\") }}" + originalFileName);
});

方法2：用data-src预存文件名（更稳妥） #

在Markdown解析环节，把图片的src换成data-src来存储原始文件名，同时给src设一个不会触发404的透明占位图，前端再读取data-src生成完整URL：

1. 解析Markdown时修改图片标签：
   将 <img src="xxx.jpg"> 改为 <img data-src="xxx.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
2. 前端jQuery代码调整为：

$(".markdown").find("img").each(function() {
    const $img = $(this);
    const fileName = $img.data("src");
    $img.addClass("markdown");
    // 拼接完整URL
    $img.attr("src", "{{ config(\"website.aws.s3\") }}" + fileName);
});

方法3：提前执行脚本（DOM加载前处理） #

把你的jQuery代码放在<head>标签里，或者给脚本加上defer属性，确保脚本在DOM解析完成但浏览器还没开始请求图片资源时执行，这样就能在浏览器发起请求前修改好src：

<script defer>
$(".markdown").find("img").each(function() {
    $(this).addClass("markdown");
    $(this).attr("src", function(i, value) {
        return "{{ config(\"website.aws.s3\") }}" + value;
    });
});
</script>

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