Question

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

在Postman Rest Client中工作正常。

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

HTML

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

Ajax

$("#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感谢您的快速解决方案。实际上我还需要发送HTTP标头和URL。因为URL可能会根据请求标题给我一个图像/音频/视频文件。

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

Answer 1

如果您的网址只是图片链接，则无需拨打电话。只需在html中添加img标记，然后修改其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>

Answer 2

您不需要使用ajax来加载图像，图像已经异步加载。因此，只需创建一个img元素并添加图像的src即可。即使页面已加载，也可以使用。

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

Answer 3

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

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

Answer 4

也许从api返回的图像是base64格式。因此，您必须将base64数据转换为图像。更改您的success: function(data) { var img= new Image(); img.src = 'data:image/png;base64,'+ data; $(".result").appendChild(img); }回调，如下所示。

SELECT name, COUNT(*)
FROM yourTable
GROUP BY name

如何在HTML页面中显示图像

4 个答案: