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

2023/1/14 2023/1/14 IT, laravel, php

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

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

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

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

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

app.blade.phpの修正

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

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

・・・・

</head>

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;
    },

methods: {

asset(path) {

var base_path = window._asset || '';

return base_path + path;

使い方

準備はこれだけです。

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

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

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

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

それでは！！！

にほんブログ村

人気ブログランキング

たーちゃん

20代前半までは東京で音楽をやりながら両手の指以上の業種でアルバイト生活をしていましたが、某大手プロバイダのテレアポのバイトでPCの知識の無さに愕然とし、コンピュータをもっと知りたい！と思ったことをきっかけに25歳の時にITの世界に未経験で飛び込みました。
紆余曲折を経て、現在は個人事業主としてお仕事させていただいており、10年ほどになります。
web制作から企業システム構築、ツール開発など、フロントエンドもバックエンドもサーバーもDBAも依頼があれば何でもやってきた雑食系エンジニアです。

今風にいうとフルスタックエンジニアということになるのかしら？？

→ 詳細プロフィールというか、生い立ちはこちら

→スキルシートをご覧になる場合はこちら

→お仕事のご依頼やお見積りなどお問い合わせはこちらから！