Fatal编程技术网
  • javascript/
  • Javascript Can'；t显示[object HTMLImageElement]

Javascript Can'；t显示[object HTMLImageElement]

javascript html

Javascript Can'；t显示[object HTMLImageElement],javascript,html,Javascript,Html,我正在尝试使用fetch（）从html中获取图像。我正在使用Cors anywhere代理以避免内核出现问题。这是我正在使用的代码，我已经修改过了。我正试图做同样的事情，但跨域。问题是我得到的是[object HTMLImageElement]，而不是图像。感谢您的帮助 多谢各位 <!doctype html> <html lang="en"> <head> <script> function getimg(){ f

我正在尝试使用fetch（）从html中获取图像。我正在使用Cors anywhere代理以避免内核出现问题。这是我正在使用的代码，我已经修改过了。我正试图做同样的事情，但跨域。问题是我得到的是[object HTMLImageElement]，而不是图像。感谢您的帮助

多谢各位

<!doctype html>
<html lang="en">
  <head>
    <script>
      function getimg(){
    fetch('https://cors-anywhere.herokuapp.com/https://www.bing.com/images/search?q=word&form=HDRSC2&adlt=strict&first=1&cw=1366&ch=665')
    .then(function (response) {
    // The API call was successful!
    return response.text();
}).then(function (html) {

    // Convert the HTML string into a document object
    var parser = new DOMParser();
    var doc = parser.parseFromString(html, 'text/html');

    // Get the image file
    var img = doc.querySelector('img');
    console.log(img);
    //this is where I think I need to be doing something else


}).catch(function (err) {
    // There was an error
    console.warn('Something went wrong.', err);
});
      }
      getimg();
      </script>
  </head>
  <body>
<div id = myDiv>

  </div>
  </body>
</html>


函数getimg（）{
取（'https://cors-anywhere.herokuapp.com/https://www.bing.com/images/search?q=word&form=HDRSC2&adlt=strict&first=1&cw=1366&ch=665')
.然后（功能（响应）{
//API调用成功！
返回response.text（）；
}).then（函数（html）{
//将HTML字符串转换为文档对象
var parser=新的DOMParser（）；
var doc=parser.parseFromString（html，'text/html'）；
//获取图像文件
var img=doc.querySelector（'img'）；
控制台日志（img）；
//这就是我认为我需要做点别的事情的地方
}).catch（函数（err）{
//有一个错误
console.warn（'出了问题'，呃）；
});
}
getimg（）；
如何显示图像而不是[object HTMLImageElement]？

您可能忘记将此图像附加到DOM。我更改了另一个链接，因为它的URL地址有问题，当我尝试使用此链接时，它会将我附加到一个不存在的图像上，并且有一个“display:none”，这可能是bing的个人资料图片，我在该网站上没有帐户

我的本地截图：

代码笔示例：

函数getimg（）{ 取（'https://cors-anywhere.herokuapp.com/https://www.sciencemag.org/news/2019/11/here-s-better-way-convert-dog-years-human-years-scientists-say'） .然后（功能（响应）{ //API调用成功！ 返回response.text（）； }).then（函数（html）{ //将HTML字符串转换为文档对象 var parser=新的DOMParser（）； var doc=parser.parseFromString（html，'text/html'）； //获取图像文件 var img=doc.querySelector（'img'）； 控制台日志（img）； //这就是我认为我需要做点别的事情的地方 const div=document.querySelector（'#myDiv'）； 控制台日志（div） 儿童分部（img） }).catch（函数（err）{ //有一个错误 console.warn（'出了问题'，呃）； }); } getimg（） 
HTMLImageElement是图像



const img1=新图像（）；
const img2=document.querySelector（'img'）；
log（HTMLImageElement的img1实例）；
log（HTMLImageElement的img2实例）

[object HTMLImageElement]
是javascript返回的图像对象

这不是绳子。因此，您不能直接使用
innerHTML

使用
appendChild
附加到DOM或使用
添加到DOM。innerHTML
类似：


div.innerHTML = [object HTMLImageElement].outerHTML;



函数getimg（）{
取（'https://cors-anywhere.herokuapp.com/https://www.bing.com/images/search?q=word&form=HDRSC2&adlt=strict&first=1&cw=1366&ch=665')
.然后（功能（响应）{
//API调用成功！
返回response.text（）；
}).then（函数（html）{
//将HTML字符串转换为文档对象
var parser=新的DOMParser（）；
var doc=parser.parseFromString（html，'text/html'）；
//获取图像文件
var img=doc.querySelector（'img'）；
控制台日志（img）；
//这就是我认为我需要做点别的事情的地方
//文档查询选择器（“myDiv”）.appendChild（img）；
document.querySelector（“#myDiv”）.innerHTML=img.outerHTML；
}).catch（函数（err）{
//有一个错误
console.warn（'出了问题'，呃）；
});
}
getimg（）



这个问题可能会帮助你：[重复问题]@JeffVdovjak这个问题根本不相关。这个问题不是关于Base64编码的。你检查过返回的HTML了吗？它是你期望的吗？HTMLImageElement是图像！不清楚你想做什么。是否要显示图像？然后将img添加到您的文档中。您想要图像的URL吗？使用
img.src
。谢谢，异步函数要简单得多。