Shopifyでの画像の表示方法を解説します。
表示のさせ方は色々ありますが構築にあたって画像の表示は絶対使うのでぜひ覚えてください！
私がよく使う画像を表示するコード
スキーマ（"type": "image_picker”）で画像を読み込んでそれを表示させています。
image_tagフィルターを使っても読み込めますが直感的にimgタグで囲ってあげた方が分かりやすいのでimgタグで出力してます。
上記のコードはスニペットに登録してるのですぐに出せるようにしてます。
コードの解説
パスの読み込み（src=""）
※section.settings.imageはスキーマのimage_pickerを読み込んでいます画像のパスはimage_urlを使って読み込みます
また、widthかhightを指定してあげないとエラーが返されるので注意です（img_tagフィルターを使った場合のみエラーを確認、imgタグで囲む場合はエラーは出ずに出力されますがつけておきましょう）
画像サイズの指定方法はいくつかあります
- 幅のみ指定（最大5760pxまで指定可能、高さは画像の寸法に基づいて自動的に計算）
- 高さのみ指定（最大5760pxまで指定可能、幅は画像の寸法に基づいて自動的に計算）
- 両方指定
オルト属性（alt=""）
スキーマで画像を読み込んでいればaltプロパティで画像の代替えテキストが読み込めます。
画像の代替えテキストはここで設定できます！！
alt属性（オルト属性）とは
Webブラウザで画像が表示できないときに、画像の代わりに表示されるテキストを指定するために使われるものです
画像の下の余白をなくす（style="vertical-align: bottom;"）
Dawnだと画像の下にmarginやpaddingで消せない余白(赤枠）ができてしまうのでvertical-align: bottom;をつけておきましょう。これで謎の余白が消えます！
※img_urlは非推奨です(テーマによっては使われてたりします） ※file_urlやasset_urlはサイズが指定できないので使うことはないですまとめ
他にも色々な設定ができるので公式ドキュメントぜひを見てみてください！
