【Shopify】aseetsフォルダから画像を読み込む方法（imgタグの場合とbackground-imageの場合）

お疲れさまです。hanawaです。

以前、Shopifyでコーディングする機会がありまして、初めてでしたので一旦コーディングしてから、Shopifyの言語であるliquiedに移行する作業を行いました。

liquiedは基本htmlで表示されますので、ほとんどがそのままで大丈夫になります。

ただ、普段のコーディングなどではimageフォルダやcssフォルダ、jsフォルダなど細かく分けると思うのですが、そういったファイルはshopifyになるとassetsというファイルに格納いたします。

今回はaseetsに格納したimage（画像）を読み込むコードについて共有いたします。

【liquid】assetsフォルダにある画像を読み込む方法（imgタグの場合）

// 普段のコーディングの場合
<img src="./image/logo.png" alt="logo">

// assetsフォルダから読み込む
<img src="{{ 'logo.png' | asset_url }}" alt="logo">

普段のコーディングですと、imageフォルダに画像をまとめて格納する方が多いと思うのですが、Shopifyではassetsフォルダに画像を格納いたしますので、asset_urlから呼び出しております。

【css】assetsフォルダにある画像を読み込む方法（background-imageの場合）

// 普段のコーディングの場合
body {
background-image: url("../image/logo.png");
}

// style.css
body {
background-image: url('{{ "logo.png" | asset_url }}');
}

こちらもliquid同様、assetsから読み込むように上記のコードを書きます。

cssもassetsフォルダに格納するのですが、上記のままではcssでは画像が読み込まれません。

liquidフォルダでないと、変数が使用できませんので、拡張子を以下のように変更いたします。

// style.css.liquid
body {
background-image: url('{{ "logo.png" | asset_url }}');
}

style.css.liquidと最後にliquidを追加して、拡張子をliquidにいたします。

そうすると、cssで指定した背景画像でも表示されるようになります。

cssでurl(‘{{ “logo.png | aseet_url” }}’)と追加したのに何故か反応されない！と悩んでいる方は、cssフォルダの最後にliquidを追加して、拡張子を変更してみてください。（私もこれでしばらく悩みました笑）

こういった備忘録を、これからも社内ブログで発信できればなと思います。

本日もお疲れさまでした！