O'Reilly logo

Vue.js 2.x by Example by Mike Street

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required