FROM CACHE - jp_header
解決済

Three.jsのマッピング画像を外部から読み込み

marumaru
Shopify Partner
29 3 5

お世話になります。

現在、Three.jsで以下のようなページを作成しています。

https://anlio.jp/pages/new-look-book

マッピング画像を外部URLから読み込もうとしてもクロスドメインの関係ではじかれてしまうため、現在はAPIでassetに画像を入れています。

ただ、この方法ですとAPIでの画像登録に時間がかかり運用しづらいため外部URLからマッピング画像を読み込みたいです。

Three.jsと外部サーバーにはクロスドメインの設定は行っているのですが、どうもShopify側ではじかれているようです。

何か方法はありますでしょうか?

よろしくお願いします。

1 件の受理された解決策

junichiokamura
Community Manager
1200 280 506

成功

テーマに直接 img タグなどで外部画像ファイルを読み込むことは可能だと思うのですが、具体的に弾かれている状況はどういったものでしょうか?

実際のコードやブラウザ上のエラーなど共有いただけると回答が得やすいと思います。

Senior Partner Solutions Engineer

元の投稿で解決策を見る

2件の返信2

junichiokamura
Community Manager
1200 280 506

成功

テーマに直接 img タグなどで外部画像ファイルを読み込むことは可能だと思うのですが、具体的に弾かれている状況はどういったものでしょうか?

実際のコードやブラウザ上のエラーなど共有いただけると回答が得やすいと思います。

Senior Partner Solutions Engineer
marumaru
Shopify Partner
29 3 5

ご返事ありがとうございます。

再度確認したところ、画像を持っているサーバーの設定が漏れていました。

NGINXの

location ~* \.(jpg|jpeg|gif|png|css|js|swf|ico|pdf|svg|eot|ttf|woff)$ {

部分に

add_header Access-Control-Allow-Origin https://”ドメイン”;

の設定を加えたところ、Shopify内ページのThree.js側でマッピング画像が取得できるようになりました。

Shopifyと関係ない部分で失礼しました。