How does img tag work if there is no defined route in web.php?

@Tray2 Yes, I want to use AJAX or Fetch API to get a list of URLs then append img's to the page.

but still, how am I able to access the URLs if they aren't defined in web.php? Maybe it has something to do with the fact that I created a symbolic link from app/storage/ to app/public/storage so maybe it also create some route behind the scenes to this symlink url?

@Ligonsker You can access anything that is in the public directory, just like you would a static site.

https://yoursite.com/images/123.jpg

@Tray2 but can't I use Laravel's routing to block access to that route before the file name so that anything after is blocked even files, something like:

https://yoursite.com/images/{block_all}

Or that's not possible with files?

@Ligonsker As long as you store the images in public no.

You can of course create a route for viewing images.

@Tray2 yes that's what I currently have, but I'm stuck as to how to "restrict" access to users from viewing other users images

Because now that I put symlink to public anyone can access it, but I want only the user who uploaded the photos to be able to view his photos (or those who he gave permissions to view these images)

From my previous post: https://laracasts.com/discuss/channels/code-review/how-to-restrict-access-to-folders-after-creating-symlink-to-storage

Although I think it's not the role of PHP/Laravel, maybe the server (nginx) in this case?

@Ligonsker All restrictions should be made in the application.

In your image table you add a user_id, that way you know who uploaded it. Then you filter on that, so only images belonging to the authenticated user is fetched from the database.

Now you can use uuid for the filename, that way no one can guess the filenames.

Then you set the visibility on the file.

https://laravel.com/docs/9.x/filesystem#file-visibility

@Ligonsker a very very very old post

https://serverfault.com/questions/332631/how-can-i-protect-files-on-my-nginx-server

@Ligonsker with hashed string still can't prevent user share the link to other peoples

i remember someone say can use permission in S3 disk

@MichalOravec but in this case it means the images are placed in the public folder (or symlink to it) and then it means I have to put publicly place all the uploaded images of all users in the public folder (or symlink to it)

But also I use ajax to get the images

@Ligonsker you don't use the symlink for the folders that have private files. I serve them with readfile() but there are other techniques.

Edit:

Just one example, as there are many ways to accomplish this:

In ImageController

    public function displayImage()
    {
        $basedir = "/stohere/uploads";   // A folder that has nothing to do with web
        $imagedir = Request::input('dir');
        $image = Request::input('img');
       
       // Implement your auth here how you choose

        $file = $basedir . '/' . $imagedir . '/' . $image;

        header('Content-Type: image/jpeg');
        ob_clean();
        readfile($file);
        exit(0);
    }

**View

<img src="<?php echo 'http://localhost/laravel859/image?dir=imgdogs&img=' .  $mydog; ?>" alt="" class="image">

But just a simplified example. Change / adapt as needed.

@jlrdw But I need it for the <img> src, can it be done via readfile is as well?

@Ligonsker yes, example updated. I'm not saying use readfile, that's just one technique. Read https://laravel.com/docs/9.x/responses#file-responses Like @michaloravec suggested.

Sorry another edit:

Image route

Route::get('image', 'ImageController@displayImage');

@jlrdw thank you, I just tested using the response as shown in the docs, and it showed me the image from storage/uploads/ path, but the image src shows as mysite.dev, so no real path. Now how am I supposed to use that response if I want to use AJAX to fetch let's say 100 images at once? It works when I simply write the route to the Controller method:

// web.php
Route::get('show_image', [Controller::class, 'show_image']);

and

// Controller.php
public function show_image(Request $request)
{
    $pathToFile = '../storage/uploads/460s6DLmCnvoom90S7wfk.jpg';
    return response()->file($pathToFile);
}

then when I go to in the browser to the url mysite.dev/show_image it displays me the image with src as mysite.dev/show_image.

But how can I use this response to actually display it with AJAX, not in blade? And for multiple files, not one like here?

@Ligonsker you really need to take some of the free lessons from here, there is quite a few on JavaScript.

Just my suggestion but I would not want to pull 100 images at a time, maybe 10 at a time paginated.

And free video as an example is:

https://laracasts.com/series/javascript-techniques-for-server-side-developers/episodes/1

When using Ajax and JavaScript I frequently use a server fetched partial to display things like a lookup table, but images in a table also work, in fact any type of page.

I use an object instead of an iframe normally.

But just my opinion you need to take a couple to 6 months and really dig in some tutorials and video lessons and learn, and practice programming along the way.

Edit:

In other words you do not have to mess around with JavaScript to display images, yet you are using JavaScript for a server partial. It is literally that easy.

@jlrdw I only show like 20 images at a time and only low quality thumbnails which load relatively fast.

I don't use pagination, instead I'm using the Oberserver Intersection API and I made an infinite scroll

That's why I need a way to fetch multiple images with the Fetch API, to get 20 more images at a time.

In my testing it was simple, I had an array of image sources from some stock images api:

const images = [
  {
    id: '1',
    src: 'https://image_api/path_to_some_image1'
  },
    id: '2',
    src: 'https://image_api/path_to_some_image2'
  },
   // more images paths
    id: '20',
    src: 'https://image_api/path_to_some_image20'
  }
];

But now I need to find a way to somehow replace the above hard coded public images sources array with images I fetch from storage/uploads/.

I just now wonder if I can use response()->file($pathToFile); to get multiple files (like 20) and also save them in an array or something similar to the structure above to later append to my photo list <div>

@Ligonsker I suggest stay away from infinite scroll. It seems great at first until the user wants to goto (page up) a previous image. But just my suggestion.

But if using infinite scroll make sure to use server side pagination so you only have so many in memory.

Meaning don't keep getting 20 more until suddenly there are a thousand images loaded into memory.

But now I need to find a way to somehow replace the above hard coded public images sources array with images I fetch from storage/uploads/

Again I suggest not having private images in storage unless you implement good authorization for those folders. If anyone can view them, then it doesn't matter.

Edit:

When I suggested tutorials, I meant core concepts, i.e., HTML, CSS, Javascript basics, DOM manipulation, etc. Not the use of a package.

@jlrdw thanks. I plan to add a vertical bar on the side with dates then the user can jump to a date then the fetching will start from that date (I still need to figure then how to fill the gap above it, but I assume I'll create empty grid items with the number of items that are above this date but this is less important as I'm doing it to learn the Intersection Observer API)

Regarding server side pagination, I'm not sure if that what you meant but the controller should only fetch 20 at a time, so if I jump to a later date I still fetch 20 starting from the desired date.

I suggest not having private images in storage unless you implement good authorization for those folders. If anyone can view them, then it doesn't matter.

But it's not that anyone can view them, only the user who uploaded his files can view them. Or users he gave permissions to. These are private photos that the user keep. I will (try to) Implement good authorization.

I just tested with private Google Drive photos as well - I found the image url in devtools and it's actually showing a source to some Google CDN but with very long hashed string path which means... Google drive photos are publicly stored but with difficult to guess hash? Or they're doing something else? I'm just confused because it means private Google drive photos are accessible to anyone as long as they have the path so they're not blocking the path as I thought would happen. So they store everything in some public folder and rely on having impossible to guess paths?

@Ligonsker so is it something like this ?

https://laracasts.com/discuss/channels/code-review/how-does-img-tag-works-if-there-is-no-defined-route-in-webphp?reply=855190

@newbie360 YES! it's a bit different than mine because I'm using <img> tags but close enough. I tested it today to see if it works and it does, thank you!