【Laravel】assetヘルパにJavaScriptで生成した値を入れる

こんにちは。Laravelでbladeファイルでのimgタグなどのsrc属性にJavaScriptで生成したURLを入れたかったのですが、asset()を使ってpublicまでのパスを記述する方法について悩んだので書き残しておきます。

以下はLaravelのpublicフォルダに、image/pic00.pngという画像があること前提です。

# index.blade.php
<div class="wrapper">
  <img id="image" src=""> 
</div>
<script type="text/javascript" src="{{ asset('js/script.js') }}"></script>

# script.js
const image = document.getElementById('image');
const imagePath = "{{ asset('image/pic00.png') }}";

image.src = imagePath;

上記のコードで、bladeファイルにasset()ヘルパを使った書き方でsrc属性を埋めてやりたいのですがうまく表示させることはできません。

console.log(imagePath)で問題なく文字列が格納できているかテスト↓

{{ }} を使ったヘルパの記述はbladeファイルで記述したものしか適用することはできないので、JavaScriptで{{ }}をあらかじめ記述したものを無理やり埋め込んでも機能しないようです。どうやってpublicまでのパスを指定すればいいのか考えたところ、bladeファイルでassetだけ使用してURLを変数に入れておけば解決するようですね。

# index.blade.php
<div class="wrapper">
  <img id="image"> 
</div>

<!-- bladeでページのURLだけ取得しておく  -->
<script type="text/javascript">
  var base_url = '{{ asset('') }}';
</script>
<script type="text/javascript" src="{{ asset('js/script.js') }}"></script>

# script.js
const image = document.getElementById('image');
const imagePath = 'image/pic00.png';

image.src = base_url + image; 

console.logでテスト出力↓

blade側でbase_urlを定義して大元のページのURLを取得できたので、画像のパスを繋げた値をsrc属性に指定してあげればpublicフォルダにある画像をJavaScriptで指定することができます。