gpt4 book ai didi

javascript - 如何在 HTML 页面中显示图像

转载 作者:行者123 更新时间:2023-12-01 03:56:59 25 4
gpt4 key购买 nike

我有一个带有按钮的简单 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com