后端图片数据无法传递至前端问题求助

核心问题有两个：

• 后端返回的Media模型实例序列化为JSON时，不会包含getUrl()方法的结果，前端无法调用该方法
• 后端生成的slug未添加到返回的report数据中，前端可能无法获取slug字段

后端代码修改 #

调整loadMoreReports方法，提前处理图片URL并将生成的slug加入返回的report数据：

public function loadMoreReports(Request $request)
{
    $page = $request->get('page');
    $perPage = 6;

    $reports = ManagementReport::where('reports_status', 'published')
        ->skip(($page - 1) * $perPage)
        ->take($perPage)
        ->get();
        
    $reportsWithImages = $reports->map(function ($report) {
        // 获取图片并提取URL
        $images = Media::where('model_type', 'App\Models\ManagementReport')
            ->where('model_id', $report->id)
            ->where('mime_type', 'like', 'image%')
            ->get()
            ->map(function($media) {
                return [
                    'url' => $media->getUrl(),
                    // 若需要其他图片属性，可在此添加，比如文件名、mime类型等
                ];
            });

        $slug = Str::slug($report->reports_name);

        return [
            // 将slug合并到report数据中
            'report' => array_merge($report->toArray(), ['slug' => $slug]),
            'images' => $images,
        ];
    });
    
    return response()->json([
        'data' => $reportsWithImages,
        'has_more_pages' => $reports->count() === $perPage,
    ]);
}

前端代码修改 #

将前端调用image.getUrl()的部分改为直接访问image.url，因为后端现在返回的是包含URL属性的普通对象：

$.each(item.images, function(imageIndex, image) {
    // 替换getUrl()为直接取url属性
    console.log(image.url)
    html += '<div class="img">';
    html += '<img class="lazyload" data-src="' + image.url + '" alt="' + item.report.reports_name + '" title="' + item.report.reports_name + '" width="260" height="367">';
    html += '</div>';
});

额外检查项 #

1. 打开浏览器开发者工具的网络面板，查看loadMoreReports接口的响应数据，确认images数组中是否包含url字段
2. 检查ManagementReport模型是否允许所需字段被序列化为JSON，若模型有$hidden属性，确保未排除必要字段

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