URLから画像か否かを判定したい

Question

前提・実現したいこと

inputフォームでURLの入力を受け付け、入力されたURLが画像か否かを判定したいです。
また、画像のURLの末尾が拡張子では無い画像のURLも存在するので、拡張子の有無で画像の判定は行なわない方法で、画像か否かを判定したいです。

試したこと・発生している問題

URLに画像の拡張子が無い場合もあるのでURLから判定するのは不可能と考え、getして帰ってきたレスポンスから画像か否かを判定する材料があるかもしれないと思い、とりあえずAxiosを使ってレスポンスを調べてみました。

下記はReactを使った動作デモです。
CodeSandBox

結果、レスポンスのヘッダーにcontent-type":"image/jpegというものが含まれていたので、image/jpegやimage/pngかどうかで、判定ができそうだと思いました。

しかしcontent-typeというプロパティ名にはハイフンが含まれており、content-typeの値を参照することができませんでした。

---

ただ、拡張子の有無を問わず画像か否かを判定できればよいので、上記の私が試した方法ではないアプローチでよいものがあれば、ご教示いただきたいです。

該当のソースコード

export default function App() {
  const [header, setHeader] = useState("");
  const [isImg, setIsImg] = useState();
  const checkImg = async ({ target: { value } }) => {
    if (!value) return;

    const res = await axios.get(value);
    setHeader(JSON.stringify(res.headers));

    // 画像か否かを判定
    // setIsImg()
  };

  return (
    <div className="App">
      <div>
        画像のURLサンプル
        <input
          type="text"
          defaultValue="https://images.unsplash.com/photo-1651417060303-716ae896ef88?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
        />
      </div>
      <div>
        画像のURL入力フォーム
        <input type="url" onChange={checkImg} />
      </div>
      <h2>画像か否かの判定結果</h2>
      <p>
        {isImg === true && "画像です。"}
        {isImg === false && "画像ではありません。"}
      </p>
      <h2>ヘッダーのレスポンス</h2>
      <pre>{header}</pre>
    </div>
  );
}

Comments

[hoshi-takanori]

res.headers["content-type"] とか？ あと、content-type だけ知りたい (画像データ自体は不要) なら axios.head を使うと良いかも。

[whoiwhoi]

res.headers["content-type"]でcontent-typeの値を取得できました。
カッコでプロパティ名を指定して値を取得する方法とaxios.headは知らなかったので勉強になりました。
ありがとうございました。

Answer 1

このようなやり方もあります

<script>
window.onload=function(){
input = document.createElement('input');
input.type="text";
input.id="url";
document.body.appendChild(text);

var input = document.createElement('input');
input.type="button";
input.value="画像か判定";
input.addEventListener("click",function(){
img = document.createElement('img');
img.src=document.getElementById("url").value;
img.style.display="none";
img.addEventListener("load",function(){
alert("画像である");
});
img.addEventListener("error",function(){
alert("画像ではない");
});
document.body.appendChild(img);
});
document.body.appendChild(text);
}
</script>

Comments

[whoiwhoi]

動作サンプルと異なりますが、corsの問題で実際はnode.jsでaxiosを実行してたんですけど、クライアント側のバリデーションがいるなーと思っていたのでご教示いただき助かります。
imgタグのsrcに入力された文字列を入れる→読み込めたら画像、読み込めなかったら画像じゃない、ってことですね。
↓ご教示いただいた方法で画像の判定ができました。
https://jsbin.com/zevojiwobi/edit?html,css,js,output

Answer 2

質問文についたhoshi-takanoriさんのコメントを参照してください。

res.headers.content-type

↓

res.headers["content-type"]

これでimage/jpegやimage/pngなどの値が取得でき、URLから画像の判定ができるようになりました。