vue.js vuetify test-utils 警告:Vue 警告]:无效的道具:道具“src"的类型检查失败.预期字符串，得到对象 [英] vue.js vuetify test-utils warning : Vue warn]: Invalid prop: type check failed for prop "src". Expected String, got Object

问题描述

使用 v-parallax vuetify 和 prop 来显示资产 URL(这是推荐的 hack..)

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");
    },

我得到了正确显示的图像，但是运行 test:unit ，我也收到警告，因为 v 视差需要一个字符串而不是一个对象...测试正确通过(这只是一个警告..)，但是有没有办法摆脱这个警告?

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 ?

感谢反馈

推荐答案

当您需要一个文件时，它会返回该文件的数据内容.对于图像，它返回一个 Blob 对象.由于 v-parallax 中 src prop 的定义指出 src 的值应该是一个字符串(图像的路径)，Vue 将抛出该警告消息.

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.

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

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]
}

或

您可以返回图片的路径，而不是返回图片内的数据.

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://vuejs.org/v2/guide/components-props.html#Prop-Types
https://webpack.js.org/guides/asset-management/

这篇关于vue.js vuetify test-utils 警告:Vue 警告]:无效的道具:道具“src"的类型检查失败.预期字符串，得到对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！