Laravel框架下如何正确设置div背景图片路径？

首先，从你给出的浏览器可访问地址http://example.com/storage/uploads/icons/heart.png来看，你的后端应该已经正确配置了Laravel的存储符号链接（也就是执行过php artisan storage:link命令），这一步是让storage/app/public目录下的文件能通过/storage/前缀在浏览器中访问的关键。

针对你的CSS背景图片设置，有两种可靠的写法：

1. 绝对路径（推荐） #

直接使用浏览器可访问路径的相对根目录形式，这种方式不依赖CSS文件的存放位置，通用性最强：

background-image: url("/storage/uploads/icons/heart.png");

解释：/storage/开头的路径会直接指向网站根目录下的public/storage文件夹（也就是你通过符号链接关联到的storage/app/public目录），和浏览器访问的路径逻辑完全一致。

2. 相对路径（根据CSS位置调整） #

如果你的CSS文件存放在public/css/目录下，那么相对路径需要向上跳出一级到根目录，再指向storage文件夹：

background-image: url("../storage/uploads/icons/heart.png");

如果CSS文件在更深的层级（比如public/css/sub/），则需要多跳出一级：

background-image: url("../../storage/uploads/icons/heart.png");

这种方式需要根据CSS文件的实际位置调整，不如绝对路径省心。

额外检查点 #

如果发现图片还是无法加载，可以确认一下：

• 有没有执行过php artisan storage:link命令？如果没有，在项目根目录运行这个命令，它会创建public/storage到storage/app/public的软链接。
• 图片的实际物理路径是不是storage/app/public/uploads/icons/heart.png？这是符号链接对应的实际文件存放位置，确保文件确实存在这里。

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