Django中使用URL.createObjectURL预览图片报错求助

核心原因 #

你判断的完全正确：URL.createObjectURL() 仅接受File、Blob或MediaSource类型的对象，直接传入字符串格式的图片URL必然触发类型错误，这就是你看到Overload resolution failed报错的根源。

最优解决方案 #

既然图片URL已经能在浏览器正常访问，完全不需要使用URL.createObjectURL()，直接把完整的图片URL赋值给<img>的src属性即可，这是最简单高效的方式。

代码修改要点 #

1. 移除冗余的URL.createObjectURL()调用
2. 修复模板标签渲染问题：{{ request.get_host }}是Django模板标签，只能在页面初始渲染时解析，无法在AJAX的success回调（前端运行阶段）生效，建议后端直接返回完整的图片URL
3. 简化图片信息的获取逻辑：当前嵌套循环查找URL的写法过于繁琐，改用数组存储图片信息会更易处理

修改后的代码示例 #

Django视图层（view.py）优化（更简洁易维护）

def companyget(request,username):
    companyname= request.POST['companyname']
    selectedcompany = company.objects.get(companyName=companyname)
    image_company= Companyimage.objects.filter(CompanyID_id=selectedcompany.UID)
    dataset = {
        "DomainName": selectedcompany.DomainName,
        "Address": selectedcompany.companyAddress,
        "Tel": selectedcompany.companyTel,
        "URL": selectedcompany.CompanyURL,
        "Email": selectedcompany.CompanyEmail,
        "images": []  # 改用数组统一存储图片的URL和ID
    }
    for image in image_company:
        # 用request.build_absolute_uri自动拼接完整URL（包含协议+主机）
        full_image_url = request.build_absolute_uri(image.ImagePath.url)
        dataset["images"].append({
            "url": full_image_url,
            "id": image.Seq
        })

    return JsonResponse(dataset, status=200)

前端AJAX代码修改

$('#Table_Company tbody').on("click",".dt-edit",function(){
    $this = $(this);
    var dtRow = $this.parents('tr');
    var tds_company= dtRow.find("td:nth-child(2)");
    var companyname = tds_company.text();
    var curpath = "{{ request.get_full_path }}"

    $.ajax({
        type:"POST",
        url: curpath+"/"+"companyget/",
        data:{
            companyname:companyname,
            csrfmiddlewaretoken: '{{ csrf_token }}' 
        },
        success: function(data){
            // 直接遍历images数组，无需嵌套循环
            data.images.forEach(function(img){
                Companyswiper.appendSlide(
                    '<div class="col-lg-4 col-md-12 swiper-slide">'
                    +'<button class="btn btn_close" href="" type="button">X</button>'
                    +'<img class="img-thumbnail" src="'+img.url+'" alt="'+img.id+'" /> '
                    +'</div>');
            });
            // 填充表单数据
            $('#Edit_CompanyName').val(companyname)
            $('#Edit_DomainName').val(data.DomainName)
            $('#Edit_Adddress').val(data.Address)
            $('#Edit_URL').val(data.URL)
            $('#Edit_Tel').val(data.Tel)
            $('#Edit_Email').val(data.Email)
            $('#EditCompany').modal('show')
        }
    })
})

特殊场景下的备选方案（不推荐，无必要） #

如果因业务需求必须使用URL.createObjectURL()，需要先通过fetch获取图片的Blob对象，再传入方法，同时注意用完后释放资源：

// 仅作演示，实际场景不建议这么做
data.images.forEach(function(img){
    fetch(img.url)
        .then(response => response.blob())
        .then(blob => {
            const objectUrl = URL.createObjectURL(blob);
            Companyswiper.appendSlide(
                '<div class="col-lg-4 col-md-12 swiper-slide">'
                +'<button class="btn btn_close" href="" type="button">X</button>'
                +'<img class="img-thumbnail" src="'+objectUrl+'" alt="'+img.id+'" onload="URL.revokeObjectURL(this.src)" /> '
                +'</div>');
        });
});

内容的提问来源于stack exchange，提问作者Yan kiu Sze