V-FOR with background images

Question

I'm trying to get a v-for cycle with background images. My intention is to have for columns each containing a different background image. Is there something wrong here? :( Please note also photos it's an array imported with props. This is a component template.

<template>
  <div class="row">
    <div
      v-for="photo in photos"
      :key="photo"
      class="col-3"
      style="background-image: url({{photo.url}})"
    >
      Need to see photo here
    </div>
  </div>
</template>

<script>
export default {
  props: ["photos"],
};
</script>

Answer 1

I'd use template literals with the :style shorthand for v-bind:style

<template>
  <div class="row">
    <div
      v-for="(photo, index) in photos"
      :key="index"
      class="col-3"
      :style="`background-image: url(${photo.url})`"
    >
      Need to see photo here
    </div>
  </div>
</template>