Product images

The next step is to output the images for our product. If you are using the bicycles CSV file, a good product to test with is 650c-micro-wheelset – navigate to this product as it has four images. Don't forget to go back to your original product to check that it works with one image.

The images value will always be an array, whether there is one image or 100, so to display them, we will always need to do a v-for. Add a new container and loop through the images. Add a width to each image so it doesn't take over your page.

The images array contains an object for each image. This has an alt and source key that can be input directly into your HTML. There are some instances, however, where the alt value is missing – if it is, insert ...

Get Vue.js 2.x by Example now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.