如何在 HTML 页面中显示图像答案

【问题标题】：How to display image in HTML Page如何在 HTML 页面中显示图像
【发布时间】：2017-07-23 06:36:43
【问题描述】：

我有一个带有按钮的简单 HTML 页面。 Onclick 它应该通过 Ajax 调用显示图像。

它在 Postman Rest Client 中运行良好。

但在浏览器中显示的是原始数据而不是图片。

HTML

<html>
   <button type="button" id="test" onclick="asset();"> Show Asset </button>
   <div class="result"></div>    
</html>

阿贾克斯

$("#test").on("click", function asset() {
$.ajax({
    type: 'GET',

    url: 'https://url', //get an image
  //url: 'https://url', //get audio file

    beforeSend: function(xhr) {
        xhr.setRequestHeader('Accept', 'image/png');
        //xhr.setRequestHeader('Accept', 'audio/x-wav');
    },

    success: function(data) {

        $(".result").html(data);

    },
    error: function(e) {
        alert("error post" + JSON.stringify(e));
    }
});
});

原始数据示例 -

�PNG  IHDR�O^�fsRGB���gAMA���a    pHYs���o�d�mIDATx^��{TUG����3���%c�N�8������N'��;Iw'�yu�_�Q�((�����(�E@T@��%B$$�ݝd�����I�$w�xn��3�[_�9ך�Zk��^��Wc

我应该怎么做才能得到图像？

问题 2。如何在 html 页面中显示/播放音频/视频？截至目前，当我使用另一个音频网址时......浏览器中没有任何内容显示。

---编辑--- @Everyone 感谢您的快速解决方案。实际上，我还需要连同 URL 一起发送一个 HTTP 标头。因为 URL 可能会根据请求标头给我一个图像/音频/视频文件。

在这种情况下，如何在网页中显示图像/音频/视频？

【问题讨论】：

url返回的数据类型是什么？一份文件？一个字符串？
如果您的url 只是图片链接，则无需拨打ajax 电话。只需将img 标记添加到您的html 并修改其src 属性值。

标签： javascript jquery html ajax image

【解决方案1】：

如果您的网址只是图片链接，则无需进行 ajax 调用。只需将img 标记添加到您的html 并修改其src 属性值。

var url = "https://placehold.it/350x150"; // some url

$(function(){
  $("#test").click(function(){
    $("#imgId").attr("src",url);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
   <button type="button" id="test"> Show Asset </button>
   <div class="result">
    <img id="imgId" src="" />
   </div>
</html>

【讨论】：

感谢您的快速解决方案，一个类似的查询，我的 URL 可能会根据请求标头给我一个图像/音频/视频文件。在这种情况下，如何在 HTML 页面中显示音频/视频？
使用适当的html 标签，它应该可以正常工作。
我应该在哪里提到请求标头？接受代码中的音频/x-wav？
看看这是否有帮助stackoverflow.com/questions/30330856/…
是的，我已经尝试过该解决方案，但它不起作用。点击没有任何反应

【解决方案2】：

你不需要使用ajax来加载图片，图片已经异步加载了。所以只需创建一个img 元素并添加图像的src。即使页面已加载，这也有效。

$("#test").click(function() {
    $(".result").append("<img src='img/src.png' />");
});

【讨论】：

【解决方案3】：

我认为success 中的data 是base64 encoded image。在这种情况下，您必须将其显示为：

success: function(data) {
    document.getElementById('img').setAttribute( 'src', data );
}

【讨论】：

【解决方案4】：

可能从 api 返回的图像是 base64 格式。因此，您必须将该 base64 数据转换为图像。更改您的 success 回调，如下所示。

   success: function(data) {
     var img= new Image();
     img.src = 'data:image/png;base64,'+ data;
     $(".result").appendChild(img);
     }

【讨论】：