【Laravel+Vue】bladeで使えるasset関数をVueでも使えるようにする

IT
スポンサーリンク

Laravelのpublicのフォルダの場所が違ったりすることが原因で、

Vueで画像などのsrcを指定する際に困ってしまうことがあります。

 

 

bladeだと使用できるasset関数が便利なのですが、

Vueで使用することができません。

 

 

これを使えるようにするためのメモ。

 

 

 

 

app.blade.phpの修正

エントリーポイントとなるapp.blade.phpに以下のscriptタグを追加

</head>
<script>
    window._asset = "{{ asset('') }}";
</script>
<body>

 

blade内でasset関数を使用できるので、Vueで使用できるよう

windowオブジェクトのプロパティとして追加します。

 

 

app.jsの修正

LaravelMixの大本になるapp.jsのmethodsに

以下のようにasset関数を追加します。

methods: {
    asset(path) {
        var base_path = window._asset || '';
        return base_path + path;
    },

 

 

使い方

準備はこれだけです。

実際に使用する場合は、以下のようにします。

<img :src="asset('images/logo.svg')" />

 

※asset関数の値は、最後に「/」がついているので、注意が必要です。

 

それでは!!!

 

 

ブログランキング・にほんブログ村へ
にほんブログ村


人気ブログランキング

コメント

タイトルとURLをコピーしました