解析“srcset”失败——React 中的 <picture>——响应式图像的组件答案

【问题标题】：Failed parsing 'srcset' -- <picture> in React -- Component for Responsive Images解析“srcset”失败——React 中的 <picture>——响应式图像的组件
【发布时间】：2018-07-13 12:56:47
【问题描述】：

按照本教程A Guide to Responsive Images with Ready-to-Use Templates

我发现在 react 中实现一个组件存在以下问题：

解析“srcset”属性值失败，因为它有一个未知数描述符

删除 srcset 候选“XXXXXXXXXXXXXXX.webp”

它最终只加载标签 img 的 src 中的图像

我的反应组件如下：

/**
 * 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>
    );
  }
}

这里我展示了我是如何使用它的：

//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>
    );
  }
}

我认为问题在于WepPack如何导入图像文件，因为控制台发送error Dropped srcset candidate "/static/media/anyFile.webp"，这是一个相对路径，我不确定srcSet是否需要绝对路径。

如何完成我的响应式图像组件？以正确的方式工作。

【问题讨论】：

标签： image reactjs jsx create-react-app

【解决方案1】：

这部分代码多了几个逗号

       <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" 
        />

由于我已经写了整个问题，我将留下它有两个原因，尝试帮助有类似问题的人，另一个是让该组件作为寻找响应图像的人的基础

【讨论】：