jsでレスポンシブ設定 配列の中身を入れ変えたい

Question

imagesの中身をpc用とsp用で画像を切り替えたいのですが、どのようにしたらいいのか分かりません。どなたかにご教授頂きたいです。よろしくお願いいたします。

  const images = [
      'img/pc/cat/2600947_s.jpg',
      'img/pc/cat/2989325_s.jpg',
      'img/pc/cat/3051218_s.jpg',
      'img/pc/cat/3152425_s.jpg',
      'img/pc/cat/3272463_s.jpg'
  ];
  let currentIndex = 0;

  const mainImage = document.getElementById("main");
  mainImage.src = images[currentIndex]; 

Answer 1

指定された メディアクエリ文字列のパース結果を表す、新しい MediaQueryList オブジェクトを返します。

window.matchMedia - Web API | MDN

追記

こっちの方がいいかも。

sizes は、一連のメディア条件(例えば画面の幅)であり、特定のメディア条件が成立したときに、どの寸法の画像を選択するのが最適化を示します。

レスポンシブ画像の作り方 | レスポンシブ画像 - ウェブ開発を学ぶ | MDN

Comments

[masaya9460]

これは、実際にどのように記述したらいいのでしょうか。自分でこれを利用していろいろ試してみたのですができませんでした。

[Lhankor_Mhy]

追記したものの方が、楽かもしれません。

Answer 2

配列の要素それぞれの特定文字列を置換すればよいです。「js 配列 操作」「js 文字列 置換」あたりで検索してみてください。