Problems with the url of the image
Answered
JChicano posted this in #help-forum
JChicanoOP
I have the structure of the project like in the image, and when i add this image (for example)
<Image src="/Logo_WH_BG.png" width={500} height={500} alt={"Imagen"} /> it does not find it and shows.Answered by joulev
yeah it is the middleware. inside the middleware matcher, exclude paths to your image files so that your middleware doesn't try to redirect you from
that said, you could've avoided this whole thing by statically importing the image instead
which also allows you to put the png file anywhere in the source code – it doesn't have to be in
/test.png to /en/test.png.that said, you could've avoided this whole thing by statically importing the image instead
import logo from "./logo.png";
<Image src={logo} />which also allows you to put the png file anywhere in the source code – it doesn't have to be in
public7 Replies
Asian black bear
Can you confirm it is not a case-sensitivity issue by renaming that image to something simple such as
test.png and trying it again?JChicanoOP
i did it, and as always, its appear on the left (bcs an extension), but is nor rendering on the page
@Asian black bear Can you confirm it is not a case-sensitivity issue by renaming that image to something simple such as `test.png` and trying it again?
JChicanoOP
i this is the middleware that is not handle it correctly, it can be?
@JChicano i this is the middleware that is not handle it correctly, it can be?
yeah it is the middleware. inside the middleware matcher, exclude paths to your image files so that your middleware doesn't try to redirect you from
that said, you could've avoided this whole thing by statically importing the image instead
which also allows you to put the png file anywhere in the source code – it doesn't have to be in
/test.png to /en/test.png.that said, you could've avoided this whole thing by statically importing the image instead
import logo from "./logo.png";
<Image src={logo} />which also allows you to put the png file anywhere in the source code – it doesn't have to be in
publicAnswer
JChicanoOP
yesss, its working, ty mate
@joulev yeah it is the middleware. inside the middleware matcher, exclude paths to your image files so that your middleware doesn't try to redirect you from `/test.png` to `/en/test.png`.
that said, you could've avoided this whole thing by statically importing the image instead
tsx
import logo from "./logo.png";
<Image src={logo} />
which also allows you to put the png file anywhere in the source code – it doesn't have to be in `public`
JChicanoOP
One last thing, I would appreciate it if you could help me is another thread that I created that is related to this
I am getting a hydration error because having the project like this (with language management), the page loads with a 404 error and then it loads correctly with the language, all the components are asynchronous since they have to wait for the call from the query to extract the translation, but do I have to do some kind of await or promise to fix this?