web-dev-qa-db-ja.com

React.jsが<img />のsrcsetタグを削除するのはなぜですか？

<img />タグにsrcsetプロパティがある場合、ブラウザに表示されないのはなぜですか？ React.jsを介してそれを取り除いているように見えます。

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

解決策は、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.htmlHTML Attributes

65
Sawtaytoes

テンプレートリテラルを使用した別の醜い解決策：

<img
  alt=''
  src={require('../../assets/images/logo/logo.png')}
  srcSet={`
    ${require('../../assets/images/logo/[email protected]')} 2x, 
    ${require('../../assets/images/logo/[email protected]')} 3x
  `}
/>
4
Milan Rakos

文字列で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>
1
Sergey Khodyachikh