为什么React.js会移除<img />标签上的srcset属性？

Question

当我在 <img /> 标签上使用 srcset 属性时，为什么它不会在浏览器中显示？看起来好像是 React.js 将其删除了。

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

- Kevin Ghadyani

Answer 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属性下方。

- Kevin Ghadyani

---

这怎么可能是一个React解决方案？导入在哪里呢？你真的能用上述代码部署吗？ - windmaomao

在React中，您可以使用JSX。这允许您编写类似HTML的内容，然后Babel或任何其他转换器使用特殊的React插件将其转换为JavaScript。是的，这可以用于生产环境。不需要导入。 - Kevin Ghadyani

Answer 2

使用模板字面量的另一种丑陋解决方案：

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

- Milan Rakos

---

如果你在顶部导入文件，你可以让它变得漂亮。 - Stephane L

@StephaneL 这是否意味着您在每个浏览器上都要导入图像？ - Sam

@Sam 不，Webpack会将图像的导入（或require）解析为字符串（图像的URI）。当浏览器请求该图像时，图像数据将被获取，并根据“srcSet”决定哪个图像是必需的。 - Stephane L

Answer 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>

- Sergey Khodyachikh

Answer 4

import meal1x from '../images/meal.jpg';
import meal2x from '../images/[e-mail]';
import meal3x from '../images/[e-mail]';


 <img
    className='meal'
    src={meal1x}
    srcSet={`${meal1x} 1x, ${meal2x} 2x, ${meal3x} 3x `}
  />

- qlian1000