Установите фоновое изображение в v-for, используя Vue. js

Question

Я пытаюсь добавить фоновое изображение CSS в блок Dynami c style, используя require в Vue. js и v-for.

  <div v-for='item of this.$store.state.offers'
       :key="item.id"
       :style="{'background-image': 'url(' + require('../../assets/men.jpg') + ')'}"
  >

Дело в том, что приведенный выше код работает статически, но если я заменю его на ${item.img} в скобках require, он выйдет из строя. Есть ли способ?

Answer 1

Предполагая, что каждое из ваших изображений имеет путь, который вы написали статически, вы можете сделать это:

:style="{'background-image': 'url(' + require(`${item.img}`) + ')'}"

ИЛИ

:style="{'background-image': 'url(' + require('' + item.img) + ')'}"

ИЛИ

Если вы хотите просто использовать имя файла на изображении без пути, вы можете сделать это:

:style="{'background-image': 'url(' + require('@/assets/' + item.img) + ')'}"