1

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..

1
  • Are you accessing the page this runs in via http://127.0.0.1:8000/ as well - or is the request for the image a cross-origin request? Commented Feb 25 at 14:23

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.