Q&A
source はともかくimgのほうはwidth,heightが設定してあれば出ますね。
そもそも「1.webp」が存在する場合に正しく動作してますか？
webp画像対応しているブラウザだと、1.webpを表示するコードなのですが、
この時、1.webpがない場合にはnoimage.jpgを表示したいです。
どのようにしたら良いかご教示いただきたく。。
現状、GETで403が常に帰ってくる状態です。
よろしくお願いいたします。
html
1<picture> 2 <source type="image/webp" srcset="1.webp" onerror="this.onerror=null;this.src='noimage.jpg';"/> 3 <img class="crop_image" src="3.jpg" alt="3のサムネイル画像" onerror="this.onerror=null;this.src='noimage.jpg';"/> 4</picture>
追記
onerrorが発火し続けてしまうので、onerrorの中にthis.onerror=null;を追加しました。
追記
jsを書いて対応することにしました。
m.ts10806様
「1.webp」が存在する場合は正しく動作します。
存在しない場合、「3のサムネイル画像」の文字列が表示されます。
上記正しく動作するというのは、
webp対応ブラウザで「1.webp」の画像が表示されるという意です。
this.src='noimage.jpg'
は動作しておりますか？
miyabi_takatsuk様
●webp対応ブラウザの場合
<source>側のthis.src='noimage.jpg'、<img>側のthis.src='noimage.jpg'
どちらも動作せず、「3のサムネイル画像」の文字列が表示されます。
よって、うまく動作していないようです。
●webp未対応ブラウザの場合
this.src='noimage.jpg' は動作しました。画像表示されました。
属性実行のJavaScriptでは限界があるように思います。
<script>要素などで、
JavaScript制御をしっかり書かないと難しいように思います。
まずはその方向で、ご自分で調べ、やってみてください。
（今のままJS構文の回答をすると、作業依頼に答える形になる）
miyabi_takatsuk様
承知しました！ありがとうございます！
HTMLだけで記述したかったのですが、踏ん切りがつきました！
時間ある時にjs書きます！ありがとうございました！
解決（ではないかもしれませんが）したなら、自己解決の投稿をして、質問を閉じられるとよいかと。
しかし、ひとまず、残しておいて、
JSでしっかり処理する方法見つかったら、自己解決投稿でもいいかもですね。
ぬおおお、すみません、閉じてしまいました。。
おっしゃる通りです。注意します。
miyabi_takatsuk様、m.ts10806様
ありがとうございました！
サーバーサイドの言語使えるのでしたら存在チェックとかブラウザ判定して出力調整とか、やれなくもないです。
確かに、サーバーサイドでやれるならそっちの方が確実ですよね。
JSだと、ファイルの存在チェックしちゃうと、ひとまずエラーになっちゃいますしね 汗
（処理が止まらない程度の軽いエラー）
自己解決
