[Salesforce] 静的リソースでzipを使うときにハマった
はじめに
みなさんは画像などのファイルをLWCに表示したいとき、ファイルをどこに配置していますか？
私はContentDocumentに配置していたりしたのですが、共有や権限のことも考えたりしなければならず大変だなあと思っていました。
アップロードしたファイルがその場で見えて、更新も簡単なのは良いところでした。
ふと、「普通に静的リソース使えばいいじゃん」と今更ながらに思ったのがついこの間です。
ということでzipファイルを静的リソースとして登録して、LWCで使おうと思ったときにハマったことを書いてみます。
目的
LWCで読み込んでExperience Siteに表示する
準備
まずはzipファイルを作ります。
フォルダ名を「Images」として、この中に「test.png」が格納されているものとします。
これを何かしらの方法で圧縮します。
次にこれを静的リソースとして登録します。
名前：Images
ファイル：さっきつくったzipファイル
キャッシュコントロール：非公開
ハマったところ
- キャッシュコントロール
- 読み込み方法
キャッシュコントロール
これはハマったわけではないですが、調べてるときに「Siteで使う場合は公開にしないといけない」みたいな感じで誤読してしまいました。
今回は認証ユーザのみが使う場所だったので非公開でも問題なさそうでした（たぶん）
読み込み方法
まずは静的リソースをimportします。何も難しいことは有りません。
import images from '@salesforce/resourceUrl/Images'
問題はimportした静的リソースからファイルを指定するときのパスでした。
まずは駄目な例です。importしたものから直接ファイルを読み込もうとしています。
`${images}/test.png`
次に正しい例です。最初に作ったフォルダ名の次にファイル名を指定しています。
`${images}/Images/test.png`
よく考えたらわかりますが、zipファイルを読み込んでいるので本体のフォルダ/ファイル名で指定して上げる必要がありました。全く無駄な時間を過ごしていまいました。
おわり
静的リソースは容量がそんなに大きくないので、小さめのロゴとかそういったもので使い分けていくのが良さそうです。
Salesforceの制限に悩まされる日々ですが、うまく付き合っていきたいですね。
おわり
Discussion