FROM CACHE - jp_header

SVG画像の表示について

nananananally
Shopify Partner
1 0 0

現行の非shopifyサイト内にて

アイコン画像の表示で以下のような実装がされています。

<svg class="Icon" viewBox="0 0 30 30">
    <use xlink:href="/assets/img/icon_cart.svg#icon_cart"></use>
</svg>

 

こちらをshopify(自作テーマ)に組み込むにあたって

  1. icon_cart.svgファイルを/assets直下に配置
  2. .liquid内の表示させたい箇所にて以下のようにして組み込み
    <svg class="Icon" viewBox="0 0 30 30">
    <use xlink:href="{{ 'icon_mypage.svg#icon_mypage' | asset_url }}"></use>
    </svg>

上記の実装でいけると思っていましたが、実際には以下のように出力がされてしまい、意図した表示になってくれませんでした。

 

//cdn.shopify.com/s/files/1/0656/2047/6150/t/4/assets/icon_cart.svg%23icon_cart?822

※#がエスケープしてしまうのと、Unsafe attempt to load URL エラーが出てしまうのが問題

 

こちらの問題の良い対処法はありますでしょうか?

 

1件の返信1

Qcoltd
Shopify Partner
1051 431 418

icon_mypage.svgとicon_cart.svgのどちらのお話なのか混乱しており、

質問者様の意図と異なる回答になっているかもしれませんが、

その場合は、ご容赦ください。

 

assetsを利用しますと、URLを出力時にどうしても、

キャッシュ対策の "?v=xxxxxxxxx"というクエリパラメータがついてしまうので、

ストア管理画面 > 設定 > ファイルを利用して、svgをアップロードされてはいかがでしょうか?

 

「ファイル」から取得したリンクから、"?v=xxxxxxxxx"を削除して、

hrefに設定する、という方法では上手くいかないでしょうか?

 

「ファイル」から取得したURLは、httpsから始まるので、

Unsafe attempt to load URL も解決するのではないかと思うのですが、

動作検証していないため、

解決しなかったら申し訳ございません。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/