为什么 React.js 删除 <img /> 上的 srcset 标签？答案

【问题标题】：Why is React.js removing the srcset tag on <img />?为什么 React.js 删除 <img /> 上的 srcset 标签？
【发布时间】：2016-04-14 05:58:13
【问题描述】：

当我的<img /> 标记上有srcset 属性时，为什么它没有显示在浏览器中？似乎通过 React.js 正在剥离它。

<img src="/images/logo.png" srcset="/images/logo-1.5x.png 1.5x, /images/logo-2x.png 2x" />

【问题讨论】：

标签： html reactjs srcset

【解决方案1】：

解决方案是使用srcSet 而不是srcset。

<img src="/images/logo.png" srcSet="/images/logo-1.5x.png 1.5x, /images/logo-2x.png 2x" />

参考：https://facebook.github.io/react/docs/tags-and-attributes.html 下HTML Attributes

【讨论】：

【解决方案2】：

另一个使用模板文字的丑陋解决方案：

<img
  alt=''
  src={require('../../assets/images/logo/logo.png')}
  srcSet={`
    ${require('../../assets/images/logo/logo@2x.png')} 2x, 
    ${require('../../assets/images/logo/logo@3x.png')} 3x
  `}
/>

【讨论】：

如果你在顶部导入文件，你可以让它变得漂亮
@StephaneL 这是否意味着您要在每个浏览器上导入图像？
@Sam 不，Webpack 将图像（或要求）的导入解析为字符串（图像的 uri）。图片数据只会在浏览器请求时获取，浏览器会根据srcSet来决定它需要哪张图片。

【解决方案3】：

尝试使用带有字符串的 srcSet 可能对我不起作用，可能是因为 Webpack 是如何工作的，所以最终导入它们并将它们包含在模板字符串中，如下例所示：

import nat1 from "./img/nat-1.jpg";
import nat1Large from "./img/nat-1-large.jpg";
import nat2 from "./img/nat-2.jpg";
import nat2Large from "./img/nat-2-large.jpg";
import nat3 from "./img/nat-3.jpg";
import nat3Large from "./img/nat-3-large.jpg";


  <div className="composition">
                <img
                  srcSet={`${nat1} 300w, ${nat1Large} 1000w`}
                  sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
                  alt="Photo 1"
                  className="composition__photo composition__photo--p1"
                  src={nat1Large}
                />
                <img
                  srcSet={`${nat2} 300w, ${nat2Large} 1000w`}
                  sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
                  alt="Photo 2"
                  className="composition__photo composition__photo--p2"
                  src={nat2Large}
                />
                <img
                  srcSet={`${nat3} 300w, ${nat3Large} 1000w`}
                  sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
                  alt="Photo 3"
                  className="composition__photo composition__photo--p3"
                  src={nat3Large}
                />
  </div>

【讨论】：