Center alt text and document configurable <Image /> styling

[nicholaschiang]

Feature request

Is your feature request related to a problem? Please describe.

Right now, the lazy loading image component looks like this:

There are a couple of problems with this IMO:

1. I'd like to style it similar to my default skeleton screen loading surfaces (i.e. with a moving shadow animation).
2. I'd like to have that alt text centered in the middle of the image.

Describe the solution you'd like

You should expose and document a way to customize the image styling and the lazy loading styling as well. Or, at least center the alt text using:

display: flex;
align-items: center;
justify-content: center;

Describe alternatives you've considered

Right now, I can hackily style some things by adding styles to the img component like so:

.my-surface img {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

But this doesn't address the lazy loading styles (because I can't figure out what selectors to use for lazy loading because it loads too fast before I can get my inspector open).

[lachlanjc]

Unfortunately, there’s no consistent way to style image alt text with CSS besides color/font size/etc that I can find—Chrome & some browsers support displaying pseudoelements when the image can’t load, but it’s not in every browser, & personally I don’t think Next should apply psuedoelements that make styling the nested divs even harder. There could be a hacky way of using aria attributes & inserting the text as its own node, but that would require a bunch of accessibility testing & customizing the styling would be super tough.

[nicholaschiang]

@lachlanjc That current solution of display: flex seems to center the alt text just fine in both Firefox and Chrome. I'm not sure what you're describing. For example, you can see here if you replace one of those <img> source attributes with an invalid URL the alt text is properly centered on a gray background.

[lachlanjc]

Ah got it, must just not be supported on iOS Safari then 👍

[styfle]

customize the image styling and the lazy loading styling as well.

The alt text no longer renders with the default placeholder (placeholder="empty").

In Next.js 11, we introduced placeholder="blur" as another option during lazy loading.

Do you still want alt text displayed or does the new behavior solve your problem?

[nicholaschiang]

I think that should solve my problem! Thanks @styfle (I'm guessing you're just going through old issues... kudos for that)!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.