Next.js Discord

Discord Forum

Recive Not allowed to load local resource when trying to display blob as an image

Answered
Bucovina Shepherd Dog posted this in #help-forum
Open in Discord
Bucovina Shepherd DogOP
Hello I have a image stored in Uint8Array which I turn into blob and then try to display to the user by using this
<img src={URL.createObjectURL(imageBlob)} alt={"img"}/>

However for whatever reason I'm receiving this error can anyone help me out with it a bit?
Not allowed to load local resource: blob:nodedata:d9f9ee12-2176-4588-b814-7244224e8846
Answered by joulev
you have to run it on the browser for it to be available to the browser
View full answer

12 Replies

aardani
maybe for security reason it can't load blob:nodedata: urls?
@joulev As in could you make a full code example that I can test/see what’s wrong? Just this is not enough
Bucovina Shepherd DogOP
Okay this will take a little but I will make a repo where I will replicate this problem
@joulev Yes that will help, thanks
Bucovina Shepherd DogOP
Here hopefully you can just start it up and see the error in the console
https://github.com/laycookie/next--localBlob-error
Bucovina Shepherd DogOP
Im not trying to display an actuale image but it still does the trick to couse the error
joulev
you have to run it on the browser for it to be available to the browser
Answer
joulev
so if you run it in useEffect => works
but here since you run it on the server, it's only available for the server if that makes sense
Bucovina Shepherd DogOP
Yay I made it work in a client component thanks!
@joulev you have to run it on the browser for it to be available to the browser
Silver Fox
Hi, found this thread because I want a quick fix with blobs.

I'm not getting an error but my image doesn't show up either.


https://nextjs-forum.com/post/1195288050813653042 - here for the reference