vuejs如何传递图像url作为道具，用作css动画的css变量

Question

我有一个具有悬停动画的组件，其中4个图像在循环中旋转：

动画：changeImg-1 2.5s线性无限

@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

使用可变路径/文件名时，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

• 但这是行不通的：

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