Блог

Я пытаюсь получить цикл v-for с фоновыми изображениями. Я намерен иметь столбцы 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>
 

Я бы использовал шаблонные литералы с :style сокращением для 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>
 

См. раздел Привязка встроенных стилей

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