Display image query in Nextjs

I take an image input from the user in a route called story, then I used useRoute query to navigate to the home route with the image as a query, then I entered it inside the image tag to display it, but nothing was displayed, and without any error to let me know from where the problem is coming from, this is the code that is used to display the image:
useEffect(() => {
if (image) {
handleFileUpload(image);
}
}, [image]);

const handleFileUpload = async (imageURL) => {
try {
const response = await fetch(imageURL);
const blob = await response.blob();
const dataURL = URL.createObjectURL(blob);
setFiles((previous) => [
...previous,
<div className="bg-white rounded-lg h-60 w-36 hover:brightness-95 shadow-md">
<div className="bg-gray-400 flex h-3/4 rounded-t-lg">
<Image
src={dataURL}
alt="Story"
fit
/>
</div>
</div>,
]);
} catch (error) {
console.error("Error uploading image:", error);
}
};
useEffect(() => {
if (image) {
handleFileUpload(image);
}
}, [image]);

const handleFileUpload = async (imageURL) => {
try {
const response = await fetch(imageURL);
const blob = await response.blob();
const dataURL = URL.createObjectURL(blob);
setFiles((previous) => [
...previous,
<div className="bg-white rounded-lg h-60 w-36 hover:brightness-95 shadow-md">
<div className="bg-gray-400 flex h-3/4 rounded-t-lg">
<Image
src={dataURL}
alt="Story"
fit
/>
</div>
</div>,
]);
} catch (error) {
console.error("Error uploading image:", error);
}
};
The image query value is created by URL.createObjectURL in the story route, I think this is all the details, if you need anymore info to know the problem please let me know.
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server