Some image url used as src of <img> component is causing error

[jiaxiangcheng]

Im using react + nextjs and I would like to take screenshot of my screen. "https://media.restocks.net/products/DV6773-220/a-ma-maniere-x-air-jordan-4-violet-ore-1-400.png" Any image url from the above domain used as "src" of the component will produce an error when I call toPng.

But image url from the following domain is working "https://images.stockx.com/images/Adidas-Yeezy-Boost-350-V2-Blue-Tint-Product.jpg?fit=fill&bg=FFFFFF&w=140&h=100&fm=webp&auto=compress&q=90&dpr=2&trim=color&updated_at=1606322199"

Expected Behavior

Download the following image as png

Current Behavior

No image is downloaded and got this error.

Possible Solution

If I use images from other domains it works and it can download the image. If I use the from "next/image" it works with "https://media.restocks.net/products/DV6773-220/a-ma-maniere-x-air-jordan-4-violet-ore-1-400.png". But with from Chakra UI or the Native they don't work.

Steps To Reproduce

1. Use "https://media.restocks.net/products/DV6773-220/a-ma-maniere-x-air-jordan-4-violet-ore-1-400.png" as src of the component.
2. Take screenshot with toPng and download it with downloadjs
3. Check the error on your console.

Additional Context

-How has this issue affected you? I can not take screenshot of any image. -What are you trying to accomplish? Understand why is not working with images sources from "media.restocks.net"

Your Environment

The image domains are already in the whilelist of next.config.js

"react": "18.1.0", "next": "12.1.6",

• html-to-image: 1.11.11
• OS: macOS Ventura 13.2
• Browser: Version 109.0.5414.119 (Official Build) (arm64)

[vivcat[bot]]

👋 @jiaxiangcheng

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[farouq-ayofe]

@jiaxiangcheng were you able to find a fix for this? please

[ducdaoo]

@farouq-ayofe you should try to set cacheBust option to true, maybe your problem will be fixed

[farouq-ayofe]

Hi @ducdaoo, thanks for the feedback, I have cacheBust option set to true, I don't think this library supports remote images. My workaround here is to have those images as in-line SVG, which works great btw

[gustavotoyota]

Same problem here:

Doesn't work when there are images in the element. My images are all embedded, starting with "data:image/png;base64,..."

[KhaldiAmer]

Same problem here.

[msholty-fd]

I had an issue around this and resolved it by converting the file to a base64 blob before assigning it to the src prop. Like this:

import { useEffect, useState } from "react";

export function Base64Img{ src }: { src: string }) {
  const [blob, setBlob] = useState<string | null>(null);
  useEffect(() => {
    async function downloadAndDisplayImage() {
      try {
        const response = await fetch(src);

        if (response.ok) {
          const blob = await response.blob();
          const reader = new FileReader();

          reader.onload = function () {
            const base64Data = reader.result;
            setBlob(String(base64Data));
          };

          reader.readAsDataURL(blob);
        } else {
          console.error("Failed to download image");
        }
      } catch (error) {
        console.error("Error:", error);
      }
    }
    downloadAndDisplayImage();
  }, [src]);
  if (!blob) {
    return null;
  }
  return (
    <img
      src={blob}
    />
  );
}

[webstorms]

Same problem here

[UnCanard14]

Same problem here

[zj9495]

try to set imagePlaceholder option to data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 to avoid the default empty string causing the exception, it works to me https://github.com/bubkoo/html-to-image/blob/master/src/embed-images.ts#L58