As stated at the beginning of the chapter, each mock listing comes with several images of the room. These images are not in the project code and must be copied from a parallel directory in the code base called images
.
Copy the contents of this directory into the public/images
folder:
$ cp -a ../images/. ./public/images
Once you've copied these files, public/images
will have 30 sub-folders, one for each mock listing. Each of these folders will contain exactly four main images and a thumbnail image:

Figure 4.4. Image files in the public folder
Files in the public
directory can be directly requested by appending their relative path to the site URL. For example, the default CSS file, public/css/app.css
, can be requested at http://vuebnb.test/css/app.css
.
The advantage of using the public
folder, and the reason we've put our images there, is to avoid having to create any logic for accessing them. A frontend app can then directly call the images in an img
tag.