colbyfayock/next-wordpress-starter

Images cannot be loaded from /wp-content ...

henrikmotzkus opened this issue · 4 comments

henrikmotzkus commented

I'm very new to next.

Installed the next app on ubuntu 20 on windows subsystem for linux. Wordpress is running public (www.henrikmotzkus.de)

Images on posts coming from external sources are showing up okay. Images coming from /wp-content getting a 404.

Is my wordpress delivering images in a strange way? It seems the next app can't download them properly.

This is the response of an external image.

image

This is the response coming from the wordpress /wp-content. Browsed directly with a browser.

image

This is the output of the next app.

image

This is the browser 404.

image

henrikmotzkus commented

This is the browser console
image

colbyfayock commented

@henrikmotzkus this starter doesn't do anything with the images that come from the WordPress content, they serve them "as is" meaning, if they're not working, there's likely an issue with the way the images are being served from your WordPress instance

henrikmotzkus commented

@colbyfayock Thanks for your quick answer. Yes indeed this is exactly my observation as well.

But what can potentially cause you app to not consuming the image properly? In order to change the backend behavior I need a hint to chase on.

Below html is generated through my wordpress instance. Is any tag hindering the image ingress? My wordpress template is doing a lot of formatting for responsiveness.

 <figure class="wp-block-image size-large is-resized"><a href="/wp-content/uploads/2021/10/image.png"><img loading="lazy" src="/wp-content/uploads/2021/10/image-1024x602.png" alt="Azure kostenlos" class="wp-image-996" width="559" height="328" srcset="/wp-content/uploads/2021/10/image-1024x602.png 1024w, /wp-content/uploads/2021/10/image-300x176.png 300w, /wp-content/uploads/2021/10/image-768x451.png 768w, /wp-content/uploads/2021/10/image-1536x903.png 1536w, /wp-content/uploads/2021/10/image-2048x1203.png 2048w, /wp-content/uploads/2021/10/image-800x470.png 800w" sizes="(max-width: 559px) 100vw, 559px" /></a></figure>

  |  

colbyfayock commented

@henrikmotzkus like i mentioned it's not doing anything with the images. the only thing i notice is the images are not using the full URL to the image, meaning, it will try to load the images from the host that the application is loaded from

example:

/wp-content/uploads/2021/10/image-1024x602.png
vs
https://yourwordpresssite.com/wp-content/uploads/2021/10/image-1024x602.png

When using the first one, in any website no matter how it's built, it will default to try to use the host from where the website is coming from

So in your instance, the website is localhost:3000, so it tries to load the image at:

https://localhost:3000/wp-content/uploads/2021/10/image-1024x602.png

this isn't an issue with this Starter or Next.js, it's how the images are being provided from your WordPress instance