使用 AJAX Jquery 以 JSON 格式显示检索到的图像 URL

Posted 2023-05-08

【中文标题】使用 AJAX Jquery 以 JSON 格式显示检索到的图像 URL

【英文标题】：Display Retrieved Image URL in JSON using AJAX Jquery

【发布时间】：2020-12-13 13:34:26

【问题描述】：

我正在使用 Ajax 从数据库中检索数据以进行调用，并且响应是 JSON 格式。我可以检索其他数据但我需要引入图像，我可以检索图像 URL，如返回的 JSOn 中所示，但图像未显示。

下面是 Ajax 调用。

 $("#btnGet").click(function () 
                if ($('#Account_Number').val() == '' || $('#Account_Number').val() == undefined) 
                    alert('Please Enter Customer Account Number');
                    return false;
                
                $('.spinner').css('display', 'block');  
                $.ajax(
                    type: "POST",
                     url: "@Url.Action("AccountDetailsDebit", "Transactions")",
                    //url: "/Transactions/Transactions/SearchAccount",
                    data: 'accountNo: "' + $("#Account_Number").val() + '" ',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) 
                        alert("Hello: " + response.Firstname + " .\nYour Account Balance is: " + response.Old_Balance);
                        $('#Firstname').val(response.Firstname);
                        $('#Surname').val(response.Surname);
                        $('#Account_Type').val(response.Account_Type);
                        $('#Old_Balance').val(response.Old_Balance);
                        $('#Phone_Number').val(response.Phone_Number);
                        $('#imgPassport').attr('src', response.Image_Url);
                        $('#Account_Number').attr('readonly', 'true');
                         $('.spinner').css('display', 'none');
                    ,
                    failure: function (response) 
                       
                        alert('Account Number Does Not Exist Or Error Processing Request');
                        $('.spinner').css('display', 'none');
                    ,
                    error: function (response) 
                      
                        alert('Account Number Does Not Exist Or Error Processing Request');
                        $('.spinner').css('display', 'none');
                    
                );
            );

JSON 响应如下：

"Image_Url":"~/Images/Uploads/SavingsAccount/1000000007.jpg","Account_Number":null,"Firstname":"Sahad","Surname":"HAMMED","Phone_Number":"[phone]","Account_Type":"Savings Account","Old_Balance":0,"Amount":0,"New_Balance":0

下面是渲染图像的视图：

<div class="col-sm-2 w3-card-4">
    <br />
    <h5 class="w3-center"><strong>Mandate</strong></h5>
    <img id="imgPassport"     name="imgPassport" />
    
</div>

我遇到的问题是即使返回的 URL 存在，图像也不显示。

【问题讨论】：

console.log(response.Image_Url) 输出什么？

@Crezzur，它带来了~/Images/Uploads/SavingsAccount/10000000007.jpg

这实际上是保存的 URL，它正在正确检索它

你能在 $('#imgPassport').attr('src', response.Image_Url); 上设置一个断点吗？ ?很可能在到达行之前存在 javascript 错误。如果你到达那里然后检查 response.Image_Url。将其复制到硬编码的 html img 中（查看 url 是否有效）

可能是图片没有加载，因为它以~开头。尝试对不同的 URL 进行硬编码，看看有什么用。我还假设您可以使用 $('#imgPassport').attr('alt', response.Image_Url) 更改 alt 文本（作为一种能够操作 html 元素的测试方式）？

【参考方案1】：

谢谢大家的回复。响应有 ~ 这就是导致问题的原因。删除〜后，图像开始正常加载