Images

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

Accessing images

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.

Note

You may think...