htmlファイルでimgファイルがない時に別の画像ファイルにする方法

23 Jan 2023 on 開発

phpでhtmlのimgファイルがない時に代わりに別の画像が出る方法は二つあります。
プログラミングってサーバーサイド言語のphpが動いた後、htmlが読み込まれるのを覚えてください。

##　imgファイルがない場合別のファイルに変更する方法-phpを利用する。 if分岐でfile_existsというphpのファイル存在を確認してimgタグを吐き出す方法です。
こちらをお勧めします。
理由はphpで読み込む時にimgタグを決めますので、ブラウザー上に表示する際はスムーズに表示されます。

<?php if(file_exists( "/img/dev/one.jpg")): ?>
<img src="/img/dev/one.jpg">
<?php else: ?>
<img src="/img/dev/noPhoto.jpg" />
<?php endif; ?>

##　imgファイルがない場合別のファイルに変更する方法-htmlのonErrorを利用する。 imgの属性でonErrorがあります。
imgのファイルがない時にonErrorを通してjsが実行されますので、ソースコードを書く時に綺麗に作成するのができます。
こちらはブラウザー上で見ると、時間が少しかかります。
なので、おすすめはしないです。

<img src="/img/dev/one.jpg" onerror="this.src='/img/dev/noPhoto.jpg';">

htmlを動的に変えるのはSPAが良い。

Single Page ApplicationというSPAを使うと、
作業コストもそんなにかからないし、速度も速いです。
SPAだと、javascriptを基にしたVue.js、React.jsを使います。