Vue.js 带背景图像的V-FOR

我正在尝试用背景图像制作一个v-for循环。我的目的是为每个包含不同背景图像的列创建一个。这里有什么问题吗( 请注意，这是一个用道具导入的数组。这是一个组件模板

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

需要在这里看照片吗
导出默认值{
道具：[“照片”]，
};

请参阅

需要在这里看照片吗

对于

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>

需要在这里看照片吗

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