我有一个带有按钮的简单 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页面中显示/播放音频/视频？截至目前，当我使用另一个音频网址时...浏览器中没有任何内容显示。
---编辑--- @大家感谢您的快速解决方案。 实际上我还需要随 URL 一起发送 HTTP header 。 因为根据请求 header ，URL 可能会给我一个图像/音频/视频文件。
在这种情况下如何在网页中显示图像/音频/视频？
最佳答案
如果您的 url 只是图像链接，则无需进行 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>关于javascript - 如何在 HTML 页面中显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42573999/