如何在React和Webpack中使用srcset 2x？

Question

从这个答案

Dynamically Add Images React Webpack

我知道，如何在React + Webpack中使用常用的图像src。

如何在内部有空格的srcset 2x中获得相同的结果？

看起来我无法从这样的字符串导入：

导入图片来自＆＃39; ./ temp /picture@2x.jpg 2x＆＃39;;

它可能因为内部的空间而中断。

我试图寻找一些插件，但是这个

https://github.com/herrstucki/responsive-loader

明确表示不支持2x。

这个

https://www.npmjs.com/package/srcset-loader

根本没有提到2x，所以我猜它也不支持它。

那么，有没有办法在这里使用srcset 2x？

Answer 1

试试这个：

import LogoImg1x from 'YOUR_PATH/logo1x.png';
import LogoImg2x from 'YOUR_PATH/logo2x.png';

和

<img src={LogoImg1x} srcset={LogoImg1x + ' 1x,' + LogoImg2x + ' 2x'}/>

Answer 2

我的解决方案： 创建辅助函数IsRetina（LogoImg1x，LogoImg2x）

export default function isRetina(first, second) {
  if (window.devicePixelRatio >= 2) {
    return second
  }
  return first;
};

然后在任何地方使用它

 <img src={isRetina(logo,logo2x)} />