无法在 vue.js 中显示图像

Posted 2023-02-16

【中文标题】无法在 vue.js 中显示图像

【英文标题】：Cannot display image in vue.js

【发布时间】：2021-02-28 18:22:57

【问题描述】：

我将图像保存在以下路径中：

storage\app\public\img\user_image

并在数据库中保存这样的图像网址：

/img/user_image/285070719.png

尝试像这样显示图像：

 <img :src="'../app/public'+profile.image">

但图像不显示，非常感谢任何解决此问题的解决方案。

【问题讨论】：

可能删除'../app/public'+ 部分，/public/ 不应该出现在 URL 中，它应该是您的项目/网络服务器的“根”。图片应该可以通过它的 url 获得：/img/user_image/285070719.png

检查浏览器上的控制台或网络标签？

@dılosürücü：不，没有错误。

@kerbh0lz: 我试过删除 public 但面临同样的问题

@user3653474 好的，然后检查使用 <img :src="'/storage'+profile.image"> 时生成的 URL 并调整它以生成正确的 URL。

【参考方案1】：

您是否创建了存储链接？ php artisan storage:linkhttps://laravel.com/docs/8.x/filesystem#the-public-disk

那么你应该可以使用像/storgae/img/user_image/285070719.png这样的uri

【参考方案2】：

确保您使用php artisan storage:link 创建了从public/storage 到storage/app/public 的符号链接，然后确保生成的URL 正确。

应生成以下 URL：

http://localhost:8000/storage/img/user_image/285070719.png

以下内容应该适合您：

<img :src="'/storage'+profile.image">

来自docs：

public 磁盘用于存放可公开访问的文件。默认情况下，public 磁盘使用local 驱动程序并将这些文件存储在storage/app/public 中。要使它们可以从 Web 访问，您应该创建一个从 public/storage 到 storage/app/public 的符号链接。要创建符号链接，您可以使用storage:link Artisan 命令：php artisan storage:link