braposo / react-responsive-picture Goto Github PK

People might want to style things using CSS classes instead of inline styles so we should support that option.

Hey there,
I've noticed that if no alt prop is provided then there is no default one for the img tag.

For accessibility purposes every image should have a default empty alt tag (also called the NULL alttext), implying they are just decorative images that serves no specific purpose.
You can read more about that on MDN.

I also noticed that the sources prop in propTypes is just an array.
It should be at least a PropTypes.arrayOf(PropTypes.object).
I think this is much more robust, anyway:

sources: PropTypes.arrayOf(
     PropTypes.shape({
          srcSet: PropTypes.string.isRequired,
          media: PropTypes.string,
          type: PropTypes.string.isRequired,
     })
)

I'm going to create a PR for this issue.
Anyway thanks for this package, I find it really nice.
Good work

Any chance the peer dependencies could be bumped to React 17 ?

If I understand correctly, each within a element is allowed to have a size attribute?

-> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source

However it looks like react-responsive-picture doens't pass the sizes attribute through to the source?

Reading the documentation this seems to be by design?

For each source you can send an object containing srcSet, media and type although the last two are optional.

Was this a deliberate call, or has this need never arisen? Would you be open to an MR that adds this feature to the module?

The source of did not get re-rendered if the sources property of is changed.
The bugs happened in IE11 but it is fine fine in Chrome, FF and Safari.

What is your workflow to generate responsive images?
Is there any tools make a good developer experience?

Use case: I created the highest resolution version
and run an image processing that generates:
desktop, tablets & smartphone sizes,
then I just need to upload all theses images and adjust react-responsive-picture

The description in README is a bit misleading for FullSizePicture

"It will automatically fill the parent element maintaining the original image ratio. Please note that the parent element needs to have a defined height as you would expect for any background image as well.“

By default you are extends it to cover the whole slot, and the slot has a fix height, how can you maintain the aspect ratio?

So that we can load image only when needed and show a loading state if they're still loading. It will help decreasing the loading time of the page.

Here's what we had previously in the other repo:

Display a lo-res image as placeholder, like Medium currently does: https://jmperezperez.com/medium-image-progressive-loading-placeholder/

Interesting webpack loaders (but probably not applicable here): https://github.com/boopathi/image-size-loader and https://github.com/Levelmoney/resize-image-loader

Great presentation with examples on the topic: https://jmperezperez.com/renderconf17/#/

And also more examples: https://jmperezperez.com/more-progressive-image-loading/

According to the Picturefill website

If you dynamically change the srcset, sizes attributes, or modify source elements, please use this reevaluate option and provide an array or array-like object of your mutated img elements. As an alternative the mutation plugin can be used.

picturefill({
  reevaluate: true,
  elements: [ document.getElementById( "myImg" ) ]
});

I don't believe this is being done at the moment, and I believe it's causing a bug I'm facing where I'm doing exactly that

Hi! Thanks for this repo, quick question.

Is there any way to add a src attribute to the <img /> tags rendered by Picture?. Is there a reason why you chose not to add or support it (opting for srcSet instead)?

We need the src attribute to satisfy SEO requirements.

Hello,
I was attempting to use your package with my project, and I ran in the following error(s)

~> yarn
yarn install v1.3.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > [email protected]" has unmet peer dependency "glamor@^2.20.25".
warning " > [email protected]" has incorrect peer dependency "react@^15.0.1".
warning " > [email protected]" has incorrect peer dependency "react-dom@^15.0.1".
warning "react-responsive-picture > [email protected]" has unmet peer dependency "glamor@>=2".
[4/4] 📃  Building fresh packages...
✨  Done in 13.09s.

Are there plans to support lazy loading of images using the 'loading' attribute?

Reference: https://web.dev/native-lazy-loading/#load-in-distance-threshold

Here is the specific section

Images that are defined using the element can also be lazy-loaded:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

Although a browser will decide which image to load from any of the elements, the loading attribute only needs to be included to the fallback element.

Hello,

I am adding alt to my sources like this:

  <Picture
    className={css`
      width: 100%;
      height: 'auto;
    `}
    sources={[
      {
        alt: 'Hello',
        srcSet: desktopImage,
        media: '(min-width: 992px)',
        className: 'o-hero__image',
      },
      {
        alt: 'hello',
        srcSet: mobileImage,
        media: '(max-width: 991px)',
        className: 'o-hero__image',
      },
    ]}
  />

It isn't picking up the class or my alt values on the images. Am I missing something else?

Because accessibility is also important, alt tags should be supported (and maybe automatically generated from src file name if undefined).

We're using Radium's specific syntax to handle the picture styles so maybe it's worth changing to glamor so we can accept CSS syntax.

In Picture.js PropTypes should be imported from a separate package, prop-types to avoid depreciation warnings.

I don't understand why a dep is needed to polyfill ?

I tried to use it for background image but it doesn't work. I'm new to react so I'm not really sure if I'm doing it correctly:

render() { return ( <div> <FullsizePicture sources = {[ { srcSet: "https://images.unsplash.com/photo-1470619549108-b85c56fe5be8?dpr=2&auto=format&w=1024&h=1024", } ]} > <header className="App-header"> <h1 className="App-title">Welcome!!!</h1> </header> </FullsizePicture> </div> ); };

img is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
in img (created by Img)
in Img (created by Picture)
in picture (created by Picture)
in Picture (created by FullSizePicture)
in div (created by PictureWrapper)
in PictureWrapper (created by FullSizePicture)
in div (created by Wrapper)
in Wrapper (created by FullSizePicture)

Hey there,

It's a nice library, thanks for you work!

I am currently using it in a project written with next.js, but in order to make it work I have to maintain a fork based on #17.
Do you have any plan to merge that PR soon? It seems to be blocked by a fairly minor issue about importing vs defining a function. I am personally fine with both approach :)

Use https://gist.github.com/PurpleBooth/109311bb0361f32d87a2 as a template for the README and add badges (take styled-components as an example)