在Laravel/Vue项目中如何为Vue组件正确添加本地图片

问题根因 #

Laravel 默认仅将项目根目录下的public文件夹作为对外可访问的web根目录，你当前存放图片的storage/app目录不属于公开可访问范围，所以直接请求对应路径会返回404。

解决方案 #

• 第一步：执行Laravel官方的存储目录软链接命令，将可公开访问的存储目录映射到public下：

php artisan storage:link

执行完成后，storage/app/public目录会自动映射到public/storage路径，外部可以直接通过/storage/xxx的路径访问该目录下的文件。

• 第二步：调整图片存放位置，将你的product_images文件夹移动到storage/app/public目录下。
• 第三步：修改Vue组件里的图片路径写法：

<img src="/storage/product_images/up.png" alt="">

特殊场景适配 #

• 如果是生产环境无法执行artisan命令，可以手动创建软链接，执行命令如下（请替换为你自己的项目实际路径）：

ln -s /www/wwwroot/你的项目名/storage/app/public /www/wwwroot/你的项目名/public/storage

• 如果不想修改图片存放位置，可以修改config/filesystems.php里public磁盘的root配置项，将路径指向你当前的storage/app/product_images上级目录即可，不过不推荐这种不符合Laravel规范的写法。

内容的提问来源于stack exchange，提问作者Penny