[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]