Vue.jsのtemplateの中でURLとかの文字列をフィルターで置き換えする方法

タイトルからすごく直感的に分かりづらいタイトル！

【本記事の目的】

vue.jsの中で、文字列の中の一部をフィルターで変更したい！
（phpでいうところのstr_replace）

【前置き】（長いので飛ばしてもokです）

laravelでは画像データを投稿すると、デフォルトでpublicに保管されます。
それを実際に表示させるには画像をシンボリックリンクでstorage側で表示させる事を推奨されています。
参考：https://qiita.com/koru1893/items/1d2f522e20744b03e3ad

でもそれをlaravel経由のvue.jsで表示させようとするとうまくいかず。
vue.jsの中でimgタグの参照urlをpublic→storage に置き換える
という作業にハマったのでメモです。

**publicだと読み込めず、storageだと読み込める状態です。

なお、php（view）でそのデータを読み込むだけなら
str_replaceで画像のurlを変数にして置き換えて、imgタグの読み込み先として指定すれば行けます。

//$image_urlがdbから持ってきたurl情報。urlの一部を置き換えるということ。
$image_url = str_replace('public/', 'storage/', $image_url);

phpのview内でやる方法で完了しているじゃん！て思うんですが、
vue.jsとか使って非同期でdb上のURL文字列を取ってくる場合、img参照用のURLをjsファイル内で（今回の場合vue.jsん中で）差し替える必要があります。

---

やっと本題

カスタムフィルタを作りました！
（※vue.jsのフィルタ機能は今は自作しないとダメぽい。vue.1系はフィルタのメソッドあったぽいです。なんで削除されたんだろう？）

filtersの中に、
「public」という文字列を「..storage」に置き換える
「replace」という処理を作りました。
（置き換え前、置き換え先のコードはもちろん任意です。）

vue.js

<script>
    export default {
        props:['hoge'],
        data:function(){
            return{
             （略）
            }
        },
        mounted(){
          （略）
        },
        filters:{ //カスタムフィルタ。こんな感じ！
            replace:function(val){
                return val.replace("public", "../storage");   
            }
        },
       }
    }
</script>

replaceのフィルタは準備できました。
あとはtemplateの中で、フィルタします！
（※vue.jsの中では　{{ フィルタしたいデータ|フィルタの処理名 }} という書き方でフィルタリングできます。マスタッシュ！）

vue.js

<template>
（略）
<img :src="image_url | replace('public','../storage')" alt="">
（略）
</template>

これで、urlのなかの一部を置き換えられます。
公開サイト側でソースをみると、下記のようになります。

フィルタなしの結果

<img src="public/post_images/hoge.jpg">

フィルタありの結果

<img src="../storage/post_images/hoge.jpg">

これできちんと画像が公開サイトで読み込めました。やった！

参考：https://www.itsolutionstuff.com/post/how-to-replace-string-in-vue-jsexample.html