Admin面板列中图片无法加载问题求助

问题详情 #

表单上传图片时可正常预览，但在表格列中展示时加载失败，显示异常图标。浏览器控制台报错：

• Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
• Failed to load resource: net::ERR_CONNECTION_REFUSED

已确认信息：

• 数据库存储路径为products/image.png
• 已执行php artisan storage:link命令
• 图片同时存在于storage/app/public/products/和public/storage/products/目录
• 使用代码如下：

上传表单代码 #

//Inserting...
return $form
            ->schema([   
                FileUpload::make('image')
                    ->image()
                    ->disk('public')
                    ->directory('products')
                    ->imagePreviewHeight('250')
                    ->label('Product Image')
                    ->nullable()
                    ->columnSpan(12),
            ])

表格列代码 #

//output...
return $table
            ->columns([
                ImageColumn::make('image')
                    ->label('Image')
                    ->disk('public')
                    ->circular()
                    ->height(50)
                    ->width(50),

            ])

排查与解决步骤 #

1. 禁用浏览器拦截插件 #

ERR_BLOCKED_BY_CLIENT基本是浏览器扩展拦截了请求，比如广告拦截器（AdBlock、uBlock Origin）、隐私防护类插件：

• 暂时关闭所有浏览器扩展，刷新页面测试图片是否加载
• 若恢复正常，将Admin面板域名添加到插件白名单

2. 确认图片URL格式 #

右键异常图标复制图片地址，检查是否符合预期：

• 正确URL应为http://你的域名/storage/products/image.png
• 若URL错误，检查config/filesystems.php中public磁盘配置：

  'public' => [
      'driver' => 'local',
      'root' => storage_path('app/public'),
      'url' => env('APP_URL').'/storage',
      'visibility' => 'public',
  ],
  

  确保url配置正确，且.env文件中APP_URL设置为你的站点域名

3. 检查网络连接与服务器状态 #

ERR_CONNECTION_REFUSED说明浏览器无法访问图片地址：

• 直接在浏览器地址栏输入图片完整URL，测试能否打开
• 本地环境下确认服务器（如Valet、XAMPP）正在运行，端口未被占用
• 排查防火墙或安全组是否阻止了站点访问

4. 手动指定图片URL生成逻辑 #

尝试覆盖ImageColumn的URL生成规则，避免路径拼接异常：

ImageColumn::make('image')
    ->label('Image')
    ->circular()
    ->height(50)
    ->width(50)
    ->url(fn ($record) => Storage::disk('public')->url($record->image))

5. 清除Laravel缓存 #

执行以下命令清除缓存，避免配置缓存导致的异常：

php artisan cache:clear
php artisan config:clear
php artisan view:clear

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