I’m working on a Laravel application where I need to serve images stored in the filesystem and display them on a web page. I have defined the following route in web.php:
Route::post('/image/{campaign}/{folder}/{filename}', function ($campaign, $folder, $filename) {
$path = "private/campaigns-images/campaign-$campaign/$folder/$filename";
if (!Storage::exists($path)) {
abort(404);
}
$file = Storage::get($path);
$mimeType = Storage::mimeType($path);
return Response::make($file, 200)->header("Content-Type", $mimeType);
})->name('image.show');
HTML and JavaScript
In my frontend, I’m trying to load and set the image as a background for a Fabric.js canvas using JavaScript:
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img id="background-image"
src="{{ route('image.show', ['campaign' => 1, 'folder' => 'images_17', 'filename' => 'DJI_20241105104710_0123_V.JPG']) }}"
alt="Campaign Image"
style="width: 100%; max-width: 1200px; height: auto;">
</div>
<canvas id="canvas"></canvas>
const canvas = new fabric.Canvas('canvas');
function setBackgroundImage() {
const imgElement = document.getElementById('background-image');
if (imgElement) {
imgElement.onload = function () {
fabric.Image.fromURL(imgElement.src, function (img) {
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
});
};
// If the image is already loaded (from cache), trigger onload manually
if (imgElement.complete) {
imgElement.onload();
}
}
}
window.onload = function () {
setBackgroundImage();
};
Issue
When I try to access an image via (GET request):
http://127.0.0.1:8000/admin/image/1/images_17/DJI_20241105104710_0123_V.JPG
I get the response “No response data for this request” but if I click on the same link the resource is available
What I’ve Tried
Checked that the file exists using Storage::exists($path), and it does.
Changed the route method from POST to GET, but still no response.
Checked storage/logs/laravel.log but no related errors appear.
Tried return response(‘Test Response’); inside the route, but nothing is displayed..