Images dont show when download

[ljrodriguez1]

i have a Component that uses a image that i have upload to firebase. when downloading the component, the image does not show. is there a workaround this?.

[philmetzger]

I have this issue too! Looking for a solution?

[philmetzger]

This is a guess, but potentially it cant get access to the image due to CORS?

[cmiwjaeger]

This is a guess, but potentially it cant get access to the image due to CORS?

did u solve ur issue ?

[salman-monetate]

CORS is added automatically, shouldn't be CORS
https://github.com/salman-monetate/react-component-export-image/blob/master/index.js#L77

[cmiwjaeger]

CORS is added automatically, shouldn't be CORS
https://github.com/salman-monetate/react-component-export-image/blob/master/index.js#L77

but i still face the same issue

[NickNish09]

Any ideas on this issue? I am facing the same problem, images are not downloaded because of the CORS (from google cloud storage)

Great lib by the way

[yashafromrussia]

@NickNish09 You have to enable CORS on your server. For GCS, there's a gsutil cors set command - https://cloud.google.com/storage/docs/configuring-cors

[NickNish09]

@NickNish09 You have to enable CORS on your server. For GCS, there's a gsutil cors set command - https://cloud.google.com/storage/docs/configuring-cors

Nice! It worked! Thanks a lot.

[arohablue]

Facing the same issue for AWS bucket even after adding CORS.

[ThnxFredrik]

I’m having a similar issue, but I believe mine is related to safari. Using iOS all generated images are only white.

Even using inspector in chrome and selecting a iOS device gives me same result, a white image.

[nsinterior-dev]

Hi, I downloaded it as image but the downloaded component is white

[ThnxFredrik]

Hi, I downloaded it as image but the downloaded component is white

@nsinterior-dev Did you download it on an iOS device, or using chrome inspector and selecting a iOS device in there?

[pawelkrystkiewicz]

Any other solutions than setting CORS on google bucket? Even this didn't help in my case.
My CORS settings:
[{"maxAgeSeconds": 3600, "method": ["GET"], "origin": ["*"], "responseHeader": ["Content-Type"]}]

Browsers tested:
Edge 98.0.1108.55 x64,
FF Dev 98.0b5 (64-bit)

---

EDIT

So I got it working by settings the exact domain in the origin array

[jeffceriello]

Hi, I'm also experiencing a similar issue same issue. When I download the image on a iOS device at first it looked like the image was just black but after many tests I managed to see something on the downloaded image, so it looks like the esxported component is not positioned correctly? Please see attached exported image

[pawelkrystkiewicz]

@jeffceriello

I got the same bug, reported it here → #62

[jeffceriello]

Hi,

I've managed to make the image position correctly on mobile when downloaded with some html2canvasOptions

exportComponentAsJPEG(exportRef, {
    fileName: "goal-5",
    html2CanvasOptions: isMobile ? { 
        foreignObjectRendering: true,
        scrollY: 0,
        x: 0,
        y: 0
    } : null
});

I am now facing a weirder issue. The component I am trying to export is composed by two overlapped images. On desktop it's exported perfectly but on mobile the overlapping image doesn't show. I can only see a grey border around it. Here is the exported file

and this is what it should look like