Vuejs как передать URL изображения как реквизит для использования в качестве css переменной для css анимации

Question

У меня есть компонент с анимацией при наведении курсора, где 4 изображения поворачиваются в al oop:

animation: changeImg-1 2.5s linear infinite;

@keyframes changeImg-1 {
  0%, 100% { background-image: url('images/wel1.png'); }
  25% { background-image: url('images/wel2.png'); }
  50% { background-image: url('images/wel3.png'); }
  75% { background-image: url('images/wel4.png'); }
}

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

Я дошел до определения переменной css с помощью пути в вычисляемом свойство, которое затем используется в css:

computed: {
    userStyle () {
      return {
        '--myBackground': `url(${require('@/components/ImagesInText/images/wel1.png')})`,
      }
    }
  },

CSS:

.image {  
background:var(--myBackground); 
}

То, что я не могу заставить работать - это выбрать путь изображения из реквизита и использовать его в вычисляемом свойстве ...

   props: {
    image: { type: String, default: '@/components/ImagesInText/images/wel1.png' },
  },

Если я сделаю это ниже, я получу ошибку: не могу найти модуль '@ / components / ImagesInText / images / wel1.png' "

computed: {
    userStyle () {
      return {

        '--myBackground': `url(${require( this.image )})`,
      }
    }
  },

Answer 1

При использовании переменной path / filename, require требуется некоторая помощь. Вы должны жестко закодировать хотя бы первую часть пути в виде строки.

• Например, это работает:

const filename = 'wel1.png';
require('@/components/ImagesInText/images/' + filename); // <-- The string is needed

• Это тоже работает:

const path = 'components/ImagesInText/images/wel1.png';
require('@/' + path); // <-- This is good enough too

• Но это будет не работа:

const fullpath = '@/components/ImagesInText/images/wel1.png';
require(fullpath); // <-- No. Can't infer the path from a variable only