本文详解如何在 Laravel 中通过纯 JavaScript 动态加载 storage 目录下的图片资源，避免 Blade 模板语法在 JS 文件中失效导致的 404 错误，并提供安全、可维护的实现方案。
本文详解如何在
laravel
中通过纯
java
script 动态加载 `storage` 目录下的图片资源，避免 blade 模板语法在 js 文件中失效导致的 404 错误，并提供安全、可维护的实现方案。
在 Laravel 项目中，开发者常希望以动态方式渲染一组图片（如作品集、案例图库），避免每次新增图片都手动修改 Blade 模板。一个直观思路是：用 JavaScript 遍历序号，拼接路径并创建 元素插入 DOM。但若直接在外部 .js 文件中使用 Blade 语法（如 {{ asset('...') }}），
该语法将完全不被解析
——因为 .js 文件由 Web 服务器原样返回，未经 PHP 渲染，导致生成的 URL 错误（例如 {{ asset('designImages/design-${i}.png') }} 被当作字面量字符串，而非执行后的真实路径），最终触发 404。
✅ 正确做法：分离静态路径与动态逻辑
Blade 模板负责提供「可被 JavaScript 安全读取」的基础路径，JavaScript 仅负责拼接和渲染。推荐采用以下结构化方案：
1. 在 Blade 模板中注入动态路径前缀（推荐方式）
在 index.blade.php 中，通过
@endpush
? 注意：此处使用 asset('storage/...') 前提是已运行 php artisan storage:link，确保 public/storage 指向 storage/app/public。
立即学习
“
Java免费学习笔记（深入）
”；
Eclipse导入Android或其他的JAVA项目的正确方法 WORD版
本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
下载
2. 外部 JS 文件中安全拼接并加载
public/js/imageGrid.js 内容如下（支持错误处理与性能优化）：
document.addEventListener('DOMContentLoaded', () => {
const container = document.querySelector('.imageContainer');
if (!container || !window.designImagesBase) return;
const totalImages = 13; // 建议从后端传入或通过 API 获取真实数量，避免硬编码
for (let i = 1; i <= totalImages; i++) {
const img = document.createElement('img');
img.src = `${window.designImagesBase}${i}.png`;
img.alt = `Design project ${i}`;
img.loading = 'lazy'; // 启用原生懒加载
img.onerror = function () {
console.warn(`Image not found: ${this.src}`);
this.remove(); // 自动移除无效图片，避免空白占位
};
container.appendChild(img);
}
});// routes/web.php
Route::get('/api/design-images', function () {
$files = \File::glob(storage_path('app/public/designImages/design-*.png'));
return response()->json(array_map(function ($path) {
return [
'url' => asset('storage/' . basename(dirname($path)) . '/' . basename($path)),
'name' => basename($path)
];
}, $files));
});