58
задан 15 February 2018 в 22:30

3 ответа

Обязательный стиль фонового изображения с помощью динамичный значение от цикл v-for мог быть сделан как это.

<div v-for="i in items" :key="n" 
  :style="{backgroundImage: 'url('+require('./assets/cars/'+i.src+'.jpg')+')'}">
</div>
2
ответ дан 1 November 2019 в 13:18

Я испытал проблему где фоновые изображения с пробелами в имени файла где то, чтобы заставлять стиль не быть примененным. Для исправления этого, я должен был удостовериться, что строковый путь инкапсулировался в одинарных кавычках.

Примечание завершенное \' в моем примере ниже.

<div :style="{
    height: '100px',
    backgroundColor: '#323232',
    backgroundImage: 'url(\'' + event.image + '\')',
    backgroundPosition: 'center center',
    backgroundSize: 'cover'
    }">
</div>
1
ответ дан 1 November 2019 в 13:18

Другое решение:

<template>
  <div :style="cssProps"></div>
</template>

<script>
  export default {
    data() {
      return {
        cssProps: {
          backgroundImage: `url(${require('@/assets/path/to/your/img.jpg')})`
        }
      }
    }
  }
</script>

, Что делает это решение более удобным? Во-первых, это более чисто. И затем при использовании CLI Vue (я принимаю, Вы делаете), можно загрузить его webpack.

Примечание: не забывайте, что require() всегда относительно пути текущего файла.

1
ответ дан 1 November 2019 в 13:18

Другие вопросы по тегам:

Похожие вопросы: