CODEWITHSUNDEEP
imagereactjsjsxcreate-react-app
CorrOrtiz
CorrOrtiz

Reputation: 178

Failed parsing 'srcset' -- <picture> in React -- Component for Responsive Images

Following this tutorial A Guide to Responsive Images with Ready-to-Use Templates

I find the following problem to implement a component in react:

Failed parsing 'srcset' attribute value since it has an unknown descriptor

Dropped srcset candidate "XXXXXXXXXXXXXX.webp"

And it ends up loading only the image that is in src of the tag img

My react component is the following:

/**
 * Component to receive images and be responsive
 */
class RImage extends Component {
  render() {
    const {
      lg_1x, 
      lg_2x, 
      md_1x, 
      md_2x, 
      sm_1x, 
      sm_2x,
      lg_1x_JPG, 
      md_1x_JPG, 
      sm_1x_JPG, 
    } = this.props;

    return (
      <picture>
        <source
          media="(min-width: 900px)"
          srcSet={`${lg_1x} 1x, ${lg_2x} 2x"`}
          type="image/webp" 
        />
        <source
          media="(min-width: 601px)"
          srcSet={`${md_1x} 1x, ${md_2x} 2x"`}
          type="image/webp" 
        />
        <source
          srcSet={`${sm_1x} 1x, ${sm_2x} 2x"`}
          type="image/webp" 
        />
          <img  
            srcSet={`${sm_1x_JPG} 600w,
            ${md_1x_JPG} 900w,
            ${lg_1x_JPG} 1440w`}
            src={lg_1x_JPG} //This is the file that loads in the browser
            type="image/jpeg"
            alt="image description" 
          />  
        </picture>
    );
  }
}

Here I show how I am using it:

//Responsive Images
import lg_1x_JPG from '../../images/Programing/Programing-lg_1x.jpg';
import md_1x_JPG from '../../images/Programing/Programing-md_1x.jpg';
import sm_1x_JPG from '../../images/Programing/Programing-sm_1x.jpg';
//Only Chrome
import lg_1x from '../../images/Programing/Programing-lg_1x.webp';
import lg_2x from '../../images/Programing/Programing-lg_2x.webp';
import md_1x from '../../images/Programing/Programing-md_1x.webp';
import md_2x from '../../images/Programing/Programing-md_2x.webp';
import sm_1x from '../../images/Programing/Programing-sm_1x.webp';
import sm_2x from '../../images/Programing/Programing-sm_2x.webp';


class ImageClas extends Component {
  render() {
    return (
     <Grid>
        <Grid item>
          <h1>Image</h1>
          <p>A beautiful Image</p>
        </Grid>

        <Grid item>
         <RImage
              lg_1x={lg_1x}
              lg_2x={lg_2x}
              md_1x={md_1x}
              md_2x={md_2x}
              sm_1x={sm_1x}
              sm_2x={sm_2x}
              lg_1x_JPG={lg_1x_JPG}
              md_1x_JPG={md_1x_JPG}
              sm_1x_JPG={sm_1x_JPG}
            />
          </div>
        </Grid>
       </Grid>
    );
  }
}

I think the problem lies in how WepPack imports the image file because the console sends the error Dropped srcset candidate "/static/media/anyFile.webp", this is a relative path and I'm not sure if srcSet needs an Absolute path.

How can I finish my component of Responsive Images? working in the right way.

Upvotes: 2

Views: 2715

Answers (1)

CorrOrtiz
CorrOrtiz

Reputation: 178

This part of the code had a few more commas

       <source
          media="(min-width: 900px)"
          srcSet={`${lg_1x} 1x, ${lg_2x} 2x`}
          type="image/webp" 
        />
        <source
          media="(min-width: 601px)"
          srcSet={`${md_1x} 1x, ${md_2x} 2x`}
          type="image/webp" 
        />
        <source
          srcSet={`${sm_1x} 1x, ${sm_2x} 2x`}
          type="image/webp" 
        />

As I had already written the whole question I will leave it for two reasons, try to help someone who has a similar problem and the other is so that the component serves as a base for someone who is looking for responsive images

Upvotes: 0

Related Questions