Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using url from firebase storage as src for img tag, results in error Object event #438

Open
p-shepherd opened this issue Oct 4, 2023 · 1 comment
Labels

Comments

@p-shepherd
Copy link

Using url from firebase storage as src for img tag, results in error Object event, but using other types of urls as src for img tag, enables html to image download as svg without any problems.

Expected Behavior

html dom should be downloaded to svg

Current Behavior

Clicking download button results in an error, when img src url is from firebase storage, not if image is from some other place (other url from other website).
my firebase for testing it right now looks like this, so rules shouldn't been an issue.

rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
// Allow anyone to read.
match /{allPaths=**} {
allow read;
}

// Allow anyone to write.
match /{allPaths=**} {
  allow write;
}

}
}

ERROR
[object Event]
at handleError (https://8jmhgw-3000.csb.app/static/js/bundle.js:342395:58)
at https://8jmhgw-3000.csb.app/static/js/bundle.js:342418:7

Possible Solution

I don't have any experience with urls, I was wondering about the blob method, but I am stuck on it because fetch doesnt work for me,
i was also wondering of somehow changing the url to something else with some library, that will look different, or sending images from firebase storage to some other cloud drive, and getting a link from there, but I haven't done it yet.

Steps To Reproduce

In react, I have a method that works like this.

1Upload image to firebase storage
2. get url to this image from firebase storage
3. use it as a state of setImgUrl
4. use imgUrl const as src for

const uploadImage = () => {
if (imgUpload === null) return;
const imageRef = ref(storage, images/${userId}/${imgUpload.name + v4()});
uploadBytes(imageRef, imgUpload).then(() => {
getDownloadURL(imageRef).then((url) => {
// place for changing url to blob url
console.log(Message sent to database: ${url});
setImgUrl(url);
setChecker("image");
alert("Image uploaded");
});
});
};

Error Message & Stack Trace

<!-- Provide a log message if relevant -->

Additional Context

Your Environment

React/ReactFlow/CodeSandbox/Chrome/html-to-image 1.11.11

@p-shepherd p-shepherd added the bug label Oct 4, 2023
@vivcat
Copy link
Contributor

vivcat bot commented Oct 4, 2023

👋 @p-shepherd

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant