こんにちは。
スクリプト言語は一気にいじると訳わかめ。
只野です。
最近は「Livewire」で開発をしていることがあり、いつも通り開発をして「画像アップロード処理」を作っていました。
「Livewire」の画像アップロードは手順に沿って行えば「一時ファイルの作成」、「画像のプレビュー機能」が保存前に提供されます。
これは便利でいつも通り作っていたら…
なぜか”プレビューできなくなった”！
一体何が起きたのだ…ついさっきまでプレビューできていたのになぜ…
状態に陥ります。結構大幅に色々ソースを修正した際に起きたので、どこが原因で発生したのかしばしソースとにらめっこした結果…
「署名付きURLが怪しい」となりました。
「Livewire」の仕組みの話ですが、一時ファイルの参照に「Livewire」は「署名付きURL」を使います。
これは一時ファイルがサーバーのプレイベートエリアに作成され、外部からアクセスできないようにセキュリティーとして使われる仕組みです。
ちなみに署名付きURLエラーになると401が返却されます。ブラウザの開発モードでネットワークのやり取りを見るとわかります。
そのURLがおかしいことになり、プレビュー画像が正しく取得できていなかったようです。
そんで原因を調べたらなんてことはない。
Bladeテンプレートで署名付きURLがエスケープされURLが壊れてた…
「Livewire」を使ってる人は「Laravel 11」を使ってると思いますが、HTMLのテンプレートエンジンで「Blade」がデフォルトで利用されます。
この「Blade」に値を表示する際に利用する方式で「HTMLタグのエスケープ」が自動で行われます。
「え？一時ファイルの表示する際にBlade使っても普通に表示できてるけど？」
そう思った方も沢山いると思います。そうです。
HTMLタグのsrc属性に埋め込む場合は普通に使えます。
だが今回私は”Bladeのコンポーネント”の仕組みを使って、「署名付きURL」を一度、文字列としてコンポーネントに渡してしまいました。
※コンポーネントはテンプレートの一部を部品化する仕組みです。
そんで原因は下記のように画像パスを通常のエスケープ方式でコンポーネントに渡していることです。selectプロパティの箇所です。
<x-image-to-movie.create-image
sample="{{asset('image/imageToMovie/xxxxx.png') }}"
select="{{$imagePath1}}"/>これでプロパティーを渡すと文字列としてわたり、URLがエスケープされることになります。
俗にいうボンミスですね…まだまだ理解が浅かった…
なので、コンポーネントを利用して画像URLを渡す際は下記が正解になります。
<x-image-to-movie.create-image
sample="{{ asset('image/imageToMovie/xxxxx.png') }}"
:select=$imagePath1 />プロパティの前に「:」を記載し、設定したい変数をそのまま指定します。
こうすることで変数渡しになり、コンポーネント側で渡された値をそのまま使うことができます。
原因がわかってしまえばなんてことないんですが、プログラムはいつの世も小さいミスが一番はまります。
本日はこの辺で
