在vuejs中显示来自laravel的图像

Question

在尝试了“php artisan存储：链接”等解决方案后，图像仍然无法在前端（vuejs）中显示。

图像本身存储在“storage/public/app/xxx.png”中

vuejs中的代码是。

 <ul v-for="(item,v) in allItemList" :key="v">
     <li>
         <img :src="path + item.file_path" alt="">
     </li>
 </ul>
.
.
.
data: function(){
        return {
              allItemList:[],
              path: "http://127.0.0.1/api"
        }
}

我试图通过浏览器访问图像”http://127.0.0.1:80/api/storage/xxx.png，但导致“未找到”

任何线索都将不胜感激。

Answer 1

您可以创建javascriptasset（）helper函数

在您的主main.blade.php文件，其中包括在您的所有文件

添加此脚本

<script>
      window.asset = function(url){
          return "{{ asset('/') }}" + url;
      }
</script>

或者你可以像这样分配给vue实例

<script>
    window.Vue.prototype.asset = function(url){
        return "{{ asset('/') }}" + url;
    }
</script>

然后在javascript中，你可以像资产（'image.png'）