Where to put images in Laravel?
45sClear, beginner-focused explanation of the correct folder structure for images in Laravel, addressing a common confusion.
▶ Play ClipAI Summary
This video is a beginner-friendly tutorial on how to insert images into a Laravel website. The instructor demonstrates the correct way to store images in the public folder and use the asset() helper function in Blade templates to reference them, ensuring they work both in development and production.
Chapters
[00:01]
Introduction to inserting images
The video explains how to insert images into a Laravel application, covering where to place images and how to import them into pages so they work on both the development server and the production version.
[00:28]
Storing images in the public folder
The instructor recommends placing images inside the public folder, ideally in a subfolder like 'images', to ensure they are accessible in production. Images placed outside the public folder may not be imported when building the production version.
[01:27]
Using the asset() helper in Blade
To reference an image in a Blade template, use the asset() helper function with the path relative to the public folder. For example, asset('images/search.png') points to the image inside the public/images folder.
[02:48]
Common mistake: missing quotes
A common error is forgetting to wrap the path in single quotes inside the asset() function, which results in an 'undefined constant' error. Always use quotes to avoid this issue.
[03:29]
Works in production
Using the asset() helper ensures that images work not only in development but also in the production build of the website, making it a reliable method.
The video provides a simple, effective method for inserting images in Laravel by storing them in the public folder and using the asset() helper in Blade templates, ensuring they work across both development and production environments.
Mentioned in this Video
Tutorial Checklist
Study Flashcards (4)
Where should you place images in a Laravel project to ensure they work in production?
easy
Click to reveal answer
Where should you place images in a Laravel project to ensure they work in production?
easy
Click to reveal answer
Inside the public folder, ideally in a subfolder like 'images'.
00:28
What helper function is used to reference images in Blade templates?
easy
Click to reveal answer
What helper function is used to reference images in Blade templates?
easy
Click to reveal answer
The asset() helper function.
01:53
What common mistake causes an 'undefined constant' error when using asset()?
medium
Click to reveal answer
What common mistake causes an 'undefined constant' error when using asset()?
medium
Click to reveal answer
Forgetting to wrap the path in single quotes inside the asset() function.
02:48
Why is it important to place images in the public folder?
medium
Click to reveal answer
Why is it important to place images in the public folder?
medium
Click to reveal answer
Because images outside the public folder may not be imported when building the production version of the website.
00:59
💡 Key Takeaways
🔧
Public folder placement
Emphasizes the critical practice of storing images in the public folder to ensure production accessibility.
00:28
🔧
Using asset() helper
Introduces the standard Laravel method for referencing assets in Blade templates.
01:53
💡
Common error: missing quotes
Highlights a frequent beginner mistake and how to avoid it.
02:48Full Transcript
[00:01] create layouts inside our larell application and in this one we're going to learn how to insert images because that is something you might want to do at some point inside your website and when it comes to L well of course things
[00:13] as well because where do you put your images inside your project how do you actually import it into your pages and how do you import it so that it works on the development server as well as inside the production version of your website
[00:28] you know once you actually built the website um so what you're going to do is you're going to have an image ready and I do have a search bar image which looks of like a search icon that I could use inside a search field or something and I
[00:44] went ahead and placed that inside my public folder inside my public folder I did actually create a new folder called images and my images folder you know you can call whatever you want to it just kind of makes sense to call images is
[00:59] going to be inside the public folder because then I would actually be able to access it inside the production version as well because if you place it outside of here it might not necessarily get imported once you actually build the
[01:12] development version of your website into the production version so to make sure that we have access to it everywhere we want to have it inside the public folder so inside my images folder I have my image so going inside let's say any of
[01:27] your pages inside your website here in my case Cas I'm just going to go inside my default blade. PHP file which is our layouts file that we created in the last video I'm just going to go inside my header tag just to have it somewhere so
[01:40] inside my header tag I'm going to create a image tag because that is a element that we know about an image element and the source is going to be the link to the actual image and this is where we need to actually Link in the proper way
[01:53] in order to access the search.png file which is my image so inside these source I'm going to say that I want to create these two curly these two curly brackets and then I want to say acid
[02:08] parentheses now the curly brackets is a way for us to basically access certain way for us to basically access certain things inside uh inside a lwell project when you have a blade template you can also see we kind of did it up here when
[02:21] we link to a stylesheet um actually I can see we have actually done this before as so as you can see we have this acid element that links to a acid so same thing down here we're saying that we have an asset somewhere we want to
[02:34] load in and in this case it's going to be an image now the asset keyword here does actually point to your public folder so if we were to go in here I might want to say well inside the public folder I have an images folder so I'm
[02:48] going to write that down images forward slash to go into that folder and then search. PNG if it would to save this go back inside my website then you can see we get a error
[03:03] message undefined constant images and of course it's important not to make any sort of typing mistakes when you do this sort of thing so make sure that inside the parentheses you wrap it around single quotes otherwise this is
[03:16] not going to work so going back inside the website you can now see that I loaded in my image which is just of a basic search icon so this is how you can basic search icon so this is how you can load in images inside your lwell website
[03:29] and when you do actually build this particular uh development server website it will also work inside your production version of your website so that is a
[03:41] good thing so with that said I hope you enjoyed this short video and I'll see enjoyed this short video and I'll see you guys next time
[03:59] oh [Music]
