제목부터 직관적으로 알기 어려운 제목!

[본 보도의 목적]

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 문자열을 가져올 때 js 파일에서 (이번 경우 vue.js에서) img 참조용 URL을 교체해야 합니다.

드디어 본론이에요.

사용자 정의 필터를 만들었습니다!
(※ vue.js의 필터 기능은 이제 스스로 만들어야 합니다. vue.1계에 필터 방법이 있는 것 같습니다. 왜 삭제되었을까요?)
filters에서
퍼블릭 문자열을.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