vue.js vuetify test-utils warning : Vue warn]: Invalid prop: type check failed for prop "src". Expected String, got Object

Question

Using v-parallax vuetify with a prop to display an asset URL (it's a recommended hack..)

 <v-parallax :src="parallaxUrl()">

 methods: {
    parallaxUrl() {
      return require("@/assets/images/hero.jpeg");
    },

I get the image displayed correctly, BUT running test:unit , I aslo get a warning , as the v-parallax require a string and not an object... The test pass correctly ( it's only a warning..) , however is there a way to get rid of this warning ?

thanks for feedback

Answer 1

When you require an file, it returns the data content of that file. For images it returns a Blob object. And since the definition of src prop in v-parallax states that the value of src should be a string (the path to the image), Vue will throw that warning message.

To remove the warning message, you can update the definition of src in v-parallax to accept both an Object and a string.

props: {
  src: [String, Object]
}

OR

You can return the path of the image instead of returning the data within the image.

<v-parallax :src="parallaxUrl()">

methods: {
  parallaxUrl() {
    return "./assets/images/hero.jpeg"
  },
}

https://v2.vuejs.org/v2/guide/components-props.html#Prop-Types
https://webpack.js.org/guides/asset-management/