Обязательный стиль фонового изображения с помощью динамичный значение от цикл v-for мог быть сделан как это.
<div v-for="i in items" :key="n"
:style="{backgroundImage: 'url('+require('./assets/cars/'+i.src+'.jpg')+')'}">
</div>
Я испытал проблему где фоновые изображения с пробелами в имени файла где то, чтобы заставлять стиль не быть примененным. Для исправления этого, я должен был удостовериться, что строковый путь инкапсулировался в одинарных кавычках.
Примечание завершенное \' в моем примере ниже.
<div :style="{
height: '100px',
backgroundColor: '#323232',
backgroundImage: 'url(\'' + event.image + '\')',
backgroundPosition: 'center center',
backgroundSize: 'cover'
}">
</div>
Другое решение:
<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()
всегда относительно пути текущего файла.