Images do not show when I’m logged out

Question

When I log out of WordPress, images have disappeared but when I log back in, those images appear. Why is that and how can I fix this?

Solution

Since you’re using Staq Cache, our solution rewrites the HTML and replaces your images with either:

• S3 branded URLs;
• CDN based URLs;
• WebP formatted URLs.

Since your images have disappeared, this means that your images do not exist inside AWS S3.

To rectify this, please follow the steps below.

Upload to S3

Inside the WordPress site, go to Staq Hosting > AWS Cloud.

Then, if there’s a warning that you can offload images to S3, click this button to upload your images to AWS S3 buckets:

When images have been uploaded to S3 but it still doesn’t show

If the offload feature shows that all images have been uploaded but it doesn’t rectify the issue for some or all the images, this is due to images being uploaded directly to the uploads folder via FTP or File Manager solution. In other words, the images were not uploaded via the Media Library interface inside WordPress.

Staq reads what images need to be uploaded to S3 via the WordPress Media Library and database entries. If the images were not uploaded in this method, Staq will not upload the images to AWS S3.

Disabling S3 links

Follow this guide if you wish to disable AWS S3 links on a Staq hosted site.

Diagnosing images via Inspect Console

1. Navigate to the Page with the Broken Image: Open the webpage where the image appears broken.
2. Open the Inspect Console: Right-click on the broken image and select ‘Inspect’ or ‘Inspect Element’. This will open the browser’s developer tools, specifically the ‘Elements’ tab.
3. Locate the Image Source: In the ‘Elements’ tab, look for the img tag related to the broken image. It will have an attribute named src which indicates the source URL of the image.
4. View the Console Tab: Navigate to the ‘Console’ tab in the developer tools. This is where any errors related to the page will be displayed.
5. Identify the Error: Look for errors related to the image. These will usually be colored red and may contain the source URL of the broken image. Note down the error message.

Understanding Server Errors

• 404 Not Found: This means that the server couldn’t find the requested image. It’s possible the image has been deleted or the URL is incorrect.
• 403 Forbidden: The server understood the request, but it’s refusing to fulfill it. This could be due to permissions or security settings.
• 500 Internal Server Error: A generic error message indicating that the server encountered an unexpected condition that prevented it from fulfilling the request.
• 504 Gateway Timeout: The server, while acting as a gateway or proxy, did not receive a timely response from the upstream server or some other auxiliary server it needed to access to complete the request.

Note: These are some common server errors related to images, but there can be other errors as well. It’s essential to understand the specific error to take appropriate action.

Regenerate Thumbnails

Before jumping to the conclusion that the thumbnails need regeneration, it’s crucial to ensure that the issue isn’t due to other reasons.

• Check the Image URL: Thumbnails generally include dimensions in their URL, such as ‘image-150×150.jpg’. Ensure that this specific sized image exists on your server.
• Assess for External Changes: Have you recently switched themes or changed image dimensions? These actions can result in missing image sizes.
• Server Restrictions: Some server settings might prevent the generation of new image sizes. Ensure that there aren’t any server-side restrictions.

If after these checks, you’re confident that the issue is with missing or corrupted thumbnails, you may need to regenerate them. For a detailed guide on regenerating thumbnails, please refer to this KB on how to regenerate media library thumbnails in WordPress.