在 vuejs 中显示来自 laravel 的图像答案

【问题标题】：display image from laravel in vuejs在 vuejs 中显示来自 laravel 的图像
【发布时间】：2021-06-15 10:19:39
【问题描述】：

在尝试了“php artisan storage:link”等解决方案后，仍然无法在前端（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”访问图像，但结果是“未找到”

任何线索将不胜感激。

【问题讨论】：

从路径中移除api
api 应该只是路由器的路径，资产位于 storage 文件夹下，因此您应该在 127.0.0.1:80/storage/xxx.png 下找到您的图像，正如 Muhammad Dyas Yaskur 所说。
从 api 返回 url 时，最好返回资产的整个位置。因此，如果您的图像位于 Laravel 的公共目录中，即您的域的根目录，您的 api 应该返回图像的绝对位置，例如 '127.0.0.1:80/api/storage/images/xxx.png' '' 用于外部 api

标签： php laravel vue.js

【解决方案1】：

您可以创建一个 javascript asset() 辅助函数

在您的主要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 中你可以像 asset('image.png') 那样做

【讨论】：