LWC, Apex_最新の静的リソースをLWCで動的に使用

静的リソースの最新verを、動的に、かつJavaScriptでインポートしないで使用する方法だよ！


そもそもLWCで静的リソース使用する場合、importするのが普通だよね！

Apex.js

import logoImage from '@salesforce/resourceUrl/org1Logo';

Apex.html

// 例: LWC 内で <img> にセット
<img src={logoImage} alt="logo" />

ただ、困ったことに静的リソースを更新してみてほしい！最新が反映されないんだよね！


実は、実行時に実際のURLには静的リソースの「バージョンのタイムスタンプ」が含まれていて、「バージョン更新が頻繁でない」「毎回このコード部分を変更するのが面倒」という場合には、タイムスタンプが入ったURLを直接扱うのが不都合なんだよね。

（例: /resource/1675163571000/org1Logo など）に置き換えらるんだ！
この 数字部分 (1675163571000) は、その静的リソースの「バージョンのタイムスタンプ」を表すよ！

そこでApexでURLを作っちゃおうって訳！！！

まずはサンプルコード！

MyResourceController.cls

public with sharing class MyResourceController {
    @AuraEnabled(cacheable=true)
    public static String getResourceUrl() {
        StaticResource staticResource = [
            SELECT Name, SystemModStamp 
            FROM StaticResource
            WHERE Name = 'org1Logo'
            LIMIT 1
        ];

        // 動的URLを組み立てて返却
        return '/resource/'
            + String.valueOf(((DateTime)staticResource.SystemModStamp).getTime())
            + '/'
            + staticResource.Name;
    }
}

MyResource.html

<template>
    <img src={urlFileRef} alt="logo" />
</template>

MyResource.js

import { LightningElement, api, wire, track } from 'lwc';
import getResourceUrl from '@salesforce/apex/MyResourceController.getResourceUrl';

export default class MyComponent extends LightningElement {
    @track urlFileRef;

    @wire(getResourceUrl)
    wiredUrl({ data, error }) {
        if (data) {
            this.urlFileRef = data; 
        } else if (error) {
            console.error(error);
        }
    }
}

コード解説

1．JavaScriptのwiredUrl メソッドで Apex側の生成したURLを受け取り、それを urlFileRef に保存
2．HTML側で {urlFileRef} として の src にセットして常時最新を表示

なにか参考になれば嬉しいな！