Github link
Vue3 - Nuxt 3
Trying to get to the bottom of an issue, where the image doesn’t load if I was to visit it straight from the link.
Example 1: https://Domain/portfolio
I navigate directly to that exact directory and the page is trying to access images in the directory https://DOMAIN*/portfolio/portfolio/*example-image.png, now that doesn’t exist and therefore results in a 404.
Failed to load resource: the server responded with a status of 404 ()
Example 2: I navigate using the navigation menu or homepage shortcut, which are both using </NuxtLink"> which works perfectly fine.
Could it be that I perhaps didn’t set up nuxt correctly that’s resulting in this?
@Sharif4 This is an easy one, the image URLs are wrong.
For example, when going to https://www.sharif-sircar.com/portfolio/ the first one I see is:
That’s a relative URL.
The current location is /portfolio/ so it will look for the image at /portfolio/portfolio/soon.jpg
That file doesn’t exist:
https://www.sharif-sircar.com/portfolio/portfolio/soon.jpg
You can see it doing exactly that in the developer tools:
You need to fix your URLs to be correct.
A relative URL of src="soon.jpg" would work, since it would resolve to /portfolio/soon.jpg
A root relative URL of src="/portfolio/soon.jpg" would also work
1 Like
I didn’t realize that isn’t able to figure it out on its own. Something so silly on my end 
, looking forward to swapping them out tonight and push the changes, and report back.
Glad it’s/hopefully is something small.
Unrelated note: Thought this worth noting, this response email from Netlify seems to have gone to my spam for whatever reason 
@nathanmartin
It is already setup like that, in the root directory I have a few other folders to organize things, and the only image working seems to be the one located in the root directory. Accessing the page from nav menu, does have all the images working as they should with the correct relative URL.
I was hoping it would be that simple, but in a weird way also glad past me wasn’t going around putting static links everywhere.
@Sharif4 It is as simple as explained, as proven by the developer tool screenshot.
But the details matter and you seem a little confused.
I said that you could use either /portfolio/soon.jpg (root relative) or soon.jpg (relative)
Based on your screenshot it looks like you have tried to use /soon.jpg (root relative)
That file also doesn’t exist:
https://www.sharif-sircar.com/soon.jpg
One thing you will be finding strange is that the image does “work” when you start on the homepage.
This seems to be due to the site being an SPA (Single Page Application), so the page changes are simulated with the history state. In the source it shows:
But due to having started on the /index.html page that relative src loads:
If you navigate directly to https://www.sharif-sircar.com/portfolio though:
Then it tries to load from (as previously explained):
Editing the img src to /portfolio/soon.jpg immediately reveals the image:
If your app will be loading the images from different relative positions, then you want your links to be root relative, that way they’ll work from anywhere on the site.
So use /portfolio/soon.jpg
@nathanmartin
I am so sorry, I should have used a different screenshot, I was just playing around there, testing if the page was taking into account of my current page directory.
However, I did find my mistake, something so small, I didn’t think too much about!
For example, this (I didn’t make any changes)
I didn’t realize
“/portfolio/soon.jpg” /= “portfolio/soon.jpg”
I am so glad it’s a quick fix! Thank you so much!!!
I have a question for you if you don’t mind, over the years how do you find yourself getting better to pick up small things like these? Just getting exposed to more and more code? (I am asking from someone graduating soon)
It’s a good question, I’m honestly not sure.
I trained as a designer, not a developer, but have worked professionally as a developer for 18 years.
Having done it for so long I’ve been through many different technologies and worked with a lot of “fundamentals” back when they were all that existed.
So for an issue like this, I just know “how it has to operate” without even necessarily knowing the particular framework that you’re working with. E.g. I’ve never worked with Nuxt, and haven’t used Vue in years.
1 Like
One of those things I’ll have to let time solve. Thank you!
