vue.js vuetify test-utils 警告：Vue 警告]：道具无效：道具 "src" 的类型检查失败。预期字符串，得到对象

Question

使用带有道具的 v-parallax vuetify 来显示资产 URL（这是一个推荐的 hack..）

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

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

我的图像显示正确，但是 运行 test:unit，我也收到警告，因为 v-parallax 需要字符串而不是对象... 测试正确通过（这只是一个警告..），但是有没有办法消除这个警告？

感谢反馈

Answer 1

当您需要一个文件时，它return是该文件的数据内容。对于图像，它 return 是一个 Blob 对象。并且由于 v-parallax 中 src prop 的定义声明 src 的值应该是一个字符串（图像的路径），Vue 将抛出该警告消息。

要删除警告消息，您可以更新 v-parallax 中 src 的定义以接受对象和字符串。

props: {
  src: [String, Object]
}

或

您可以return图像的路径而不是return图像中的数据。

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

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

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

Answer 2

测试默认值：

return require("@/assets/images/hero.jpeg").default;