This image has an empty alt attribute – Yet again

The alt attribute has nothing to do with the URLs of the image files. The alt attribute is a property on the image tag in HTML, which has the goal to describe textually what you see in the image. If you see an elephant, it should say “elephant”.

Originally the alt attribute developed in times of slower internet connections, when often images were not loaded immediately – then the browsers displayed the content of the alt attribute. Later, the attribute was also used for accessibility goals. If someone has a visual impairment, he can have the alt attribute read aloud and thus know what the web page consists of.

In WordPress you can set the alt attribute in the media library on the image itself. There is an input field for this. If you use Gutenberg, you can also set the alt attribute in the image block on the right in the settings.

However, based on your description, it is not clear to me whether you are aware of this in this form. Did you set an alt attribute on the images? As I said, it is not about the URLs of the images.

Thanks for your reply @threadi. Yes, I’m aware of what the alt-attribute is and what it’s supposed to do. Maybe the error messages in the title is then rather a symptom and not the actual problem …

If I add an alt-text for the image, that text will be shown instead of “This image has an empty alt attribute” – but still, the image itself won’t show unless I change the URL. I would expect WP to insert a URL to an existing file and the alt-text to never actually show. Additionally it’s unclear to me, why some of the thumbnail files are directly accessible and some are not.

Do you have a concrete example of this case at hand?

I created a demo on a WP instance that’s used for testing: https://intern.akablas.de/archive/471

Note that I’ve removed class="wp-image-475" manually from both blocks such that the browser doesn’t try to display different versions of the image depending on the screen/window size.

I have installed the Graphene theme you used in a new WordPress installation as a test. No plugins are available. When I insert your image in a new post in the Gutenberg editor, the following HTML code is generated in the frontend:

<figure class="wp-block-image size-large"><img src="https://wordpress.local/wp-content/uploads/2022/06/testbild-768x1024.jpg" alt="" class="wp-image-67" srcset="https://wordpress.local/wp-content/uploads/2022/06/testbild-768x1024.jpg 768w, https://wordpress.local/wp-content/uploads/2022/06/testbild-225x300.jpg 225w, https://wordpress.local/wp-content/uploads/2022/06/testbild-1152x1536.jpg 1152w, https://wordpress.local/wp-content/uploads/2022/06/testbild-1536x2048.jpg 1536w, https://wordpress.local/wp-content/uploads/2022/06/testbild-750x1000.jpg 750w, https://wordpress.local/wp-content/uploads/2022/06/testbild.jpg 1920w" sizes="(max-width: 768px) 100vw, 768px" width="768" height="1024"></figure>

Since that is different from the one in your example:

<figure class="wp-block-image size-large"><img src="https://intern.akablas.de/wp-content/uploads/2022/06/IMG_20220512_204820362-scaled.jpg" alt=""></figure>

I have a suspect that you have some plugin installed that is affecting the output. Could you please check this? Maybe it’s worth to deactivate suspicious plugins and save the image again (for security).

Hi. Sorry for the very late reply. Deactivating & re-activating all installed plugins seems to have resolved the problem. Unfortunately I wasn’t smart enough to deactivate them one by one, so I don’t know which plugin exactly is to be blamed …

Thnaks for your support in any case @threadi !