'Vuejs how to pass image url as prop to be used as css variable for css animation

I have a component that has a hover animation where 4 images are rotated in a loop:

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'); }
}

Now I want to make this component reusable by being able to pass image strings in as props, those get assigned as css variables which then get picked up by the animation.

I got as far as defining the css variable with a path in a computed property which is then used in the css:

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

CSS:

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

What I can't get to work is to pick up an image path from props and use it in the computed property...

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

If I do this below I get en error: Cannot find module '@/components/ImagesInText/images/wel1.png'"

computed: {
    userStyle () {
      return {

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


Solution 1:[1]

As the way mentioned In this thread. it's working perfectly for me.

<div class="register-img" :style="{'background-image': 'url(' + require('@/assets/images/register-image.png') + ')'}"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 khawar Ali

Related Questions