Is it possible to replace a URL generated image with a gif generated by an API in same place?-CodePudding

I'm starting to develop using APIs and I wanted to implement the gif generated by the GIF API in an already functional project. It generates random images and I can save, view and delete them in this application, but I wanted to replace this URL that generates images with a gif generated by the API, but I don't know how to implement this correctly.

I've already tried using other codes and other ways to generate more gifs, but I couldn't save or delete them in localStorage, nor did I find out how to use buttons and functions in them, so as a last alternative I chose to try with this already functional scope, but I need know if it is possible to generate the gif in place of the image and if so, how should I do it.

<body>

    <main>
        <button >Button</button>
        <button >Favs</button>

        <div ></div>
    </main>

    <!-- modal -->
    <div >
        <div >
            <h3>Click <span id="remove">here</span> to remove favs</h3>
            <span  draggable="true">&times;</span>

        </div>

This is the code of the page, when clicking on the button an image is generated by a URL.

async function getExternalImage() {
    const response = await fetch('https://source.unsplash.com/random')

    imageContainer
        .innerHTML = `<img src="${response.url}" >`
}

This is the code that generates the random image inside the box.

CodePudding user response：

I think you mean this:

async function getExternalImage() {
    const response = await fetch('https://source.unsplash.com/random')
    document.querySelector('div.image').innerHTML = `<img src="${response.url}" >`
}

// Add event listener to button so it triggers the function when clicked:
document.querySelector('button').addEventListener('click', getExternalImage)

However, it's not clear from your question how you want users to manage their favorite images.

CodePudding user response：

I imagine you want to get the image data as a dataURL

(async() => {

  // a promisified  readAsDataURL
  const blobToDataURL = blob => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => resolve(reader.result));
    reader.addEventListener('error', reject);
    reader.readAsDataURL(blob);
  });
  try {
    // get the url
    const {url} = await fetch('https://source.unsplash.com/random');
    // fetch the url
    const result = await fetch(url);
    // read the response as a blob
    const blob = await result.blob();
    // convert the blob to a DataURL
    const data = await blobToDataURL(blob);
    // data is just a string, so do with it as you will

    // e.g. display the image
    const img = new Image();
    img.style.maxWidth="90vw";
    img.style.maxHeight="90vh";
    img.src = data;
    document.body.appendChild(img);
  } catch (error) {
    console.error(error);
  }
})();