Ich versuche, ein Bild von HTML zu bekommen, das ich mit fetch () habe. Ich verwende Cors überall Proxy, um kein Problem mit CORES zu haben. Hier ist der Code, den ich verwende und den ich von https: / geändert habe /gomakethings.com/getting-html-with-fetch-in-vanilla-js/. Ich versuche das Gleiche zu tun, aber domänenübergreifend. Das Problem ist, dass ich [Objekt HTMLImageElement] anstelle eines Bildes erhalte. Jede Hilfe wird geschätzt.

Vielen Dank

<!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>

Wie kann ich das Bild anstelle von [Objekt HTMLImageElement] anzeigen?

-3
sample 23 Feb. 2020 im 03:46

3 Antworten

Beste Antwort

HTMLImageElement ist Image!

const img1 = new Image();
const img2 = document.querySelector('img');
console.log(img1 instanceof HTMLImageElement);
console.log(img2 instanceof HTMLImageElement);
<img id="i">

Es ist nicht klar, was Sie versuchen zu tun. Möchten Sie das Bild anzeigen? Fügen Sie dann einfach img zu Ihrem Dokument hinzu. Möchten Sie die URL für das Bild? Verwenden Sie img.src.

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 all the images file
      const images = doc.querySelectorAll('img');
      images.forEach(img => {
        // Get the image file's URL
        console.log(img.src);
        // Display the image
        img.remove();
        document.body.appendChild(img);
      });
    }).catch(function(err) {
      // There was an error
      console.warn('Something went wrong.', err);
    });
}
getimg();

Beachten Sie, dass das erste Bild ein 1x1-Pixel-Bild war, daher habe ich den Code geändert, um alle Bilder anzuzeigen. Nicht alle funktionieren, da Sie die URLs wahrscheinlich so einstellen müssen, dass sie absolut und nicht relativ sind.

Ein paar andere Dinge. async / await ist IMO so viel einfacher als then

async function getimg() {
  try {
    const response = await fetch('https://cors-anywhere.herokuapp.com/https://www.bing.com/images/search?q=word&form=HDRSC2&adlt=strict&first=1&cw=1366&ch=665');
    const html = await response.text();
    // Convert the HTML string into a document object
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');

    // Get all the image files
    const images = doc.querySelectorAll('img');
    images.forEach(img => {
      if (!img.src) { return; }  // some images are empty.
      // make src absolute
      img.src = fixUrl('https://www.bing.com/images/search?', img.src);
      // Get the image file's URL
      log(img.src);
      // Display the image
      img.remove();
      document.body.appendChild(img);
    });
  } catch(err) {
    // There was an error
    console.warn('Something went wrong.', err);
  }
}
getimg();

function fixUrl(newPageHref, imgHref) {
  try {
    const newPageURL = new URL(newPageHref);
    const imgURL = new URL(imgHref);
    return imgURL.href.replace(imgURL.origin, newPageURL.origin); 
  } catch (e) {
    return imgHref;
  }
}

function log(...args) {
  const elem = document.createElement('pre');
  elem.textContent = [...args].join(' ');
  document.body.appendChild(elem);
}
0
gman 23 Feb. 2020 im 04:30

[object HTMLImageElement] ist ein von Javascript zurückgegebenes Bildobjekt.

Es ist keine Zeichenfolge. Sie können DOM also nicht direkt mit innerHTML hinzufügen

Verwenden Sie appendChild, um an DOM anzuhängen, oder fügen Sie DOM hinzu, indem Sie .innerHTML wie folgt verwenden:

div.innerHTML = [object HTMLImageElement].outerHTML;
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
//document.querySelector("#myDiv"). appendChild(img);
  document.querySelector("#myDiv").innerHTML = img.outerHTML;

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

  </div>
  </body>
0
Ritesh Khandekar 23 Feb. 2020 im 05:21

Sie haben wahrscheinlich vergessen, dieses Bild an ein DOM anzuhängen. Ich habe einen LINK gegen einen anderen geändert, weil etwas mit der URL-Adresse nicht stimmt. Als ich versuchte, diesen Link zu verwenden, wird er an ein Bild angehängt, das nicht vorhanden ist und eine Anzeige: keine hat. Dies ist wahrscheinlich ein Bing-Profilbild und ich Ich habe kein Konto auf dieser Seite.

Mein lokaler Screenshot:

enter image description here

Beispiel für Codepen: https://codepen.io/pglejzer/pen/BaNQGwd

     function getimg(){
    fetch('https://cors-anywhere.herokuapp.com/https://www.sciencemag.org/news/2019/11/here-s-better-way-convert-dog-years-human-years-scientists-say')
    .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

  const div = document.querySelector('#myDiv');
      console.log(div)
      div.appendChild(img)
}).catch(function (err) {
    // There was an error
    console.warn('Something went wrong.', err);
});
      }
      getimg();
<div id = "myDiv"></div>
0
Piotr Glejzer 23 Feb. 2020 im 02:14