vue3+vite assets动态引入图片提示 Invalid prop: type check failed for prop "src". Expected String with value

当你在Vue 3项目中使用Vite构建工具，并尝试通过`assets`属性动态导入图片时，遇到 `Invalid prop: type check failed for prop "src". Expected String with value` 这样的错误，这通常是因为你在处理 prop 的时候，传入的不是字符串值。

在Vue组件中，`src` 属性通常是用来设置图片URL，对于动态导入的图片资源，你需要确保传递给 `src` 的值是一个字符串格式，表示图片的实际路径或者是可以解析为URL的表达式。

例如，正确的代码可能是这样的：

<template>
  <img :src="dynamicImageSrc" />
</template>

<script setup>
import { ref } from 'vue';
const dynamicImageSrc = ref('');
// 在适当的时候更新动态图片源
async function updateImageSrc(path) {
  dynamicImageSrc.value = path; // 需要确保path是一个字符串
}
</script>

检查一下你的代码，确保任何时候动态赋给 `dynamicImageSrc` 的值都是一个字符串，并且这个字符串指向的是静态资产文件夹下的有效图片路径。

相关问题

vue3动态引入assets图片使用new URL警告Invalid prop: type check failed for prop "src". Expected String with value

在Vue3中，当你尝试通过`new URL()`的方式动态导入assets图片，并将其赋值给组件的`src`属性时，可能会收到"Invalid prop: type check failed for prop 'src'. Expected String with value"这样的警告。这是因为`src`通常期望的是字符串类型的URL，而`new URL()`返回的是一个`URL`对象。

解决这个问题，你需要将`new URL()`的结果转换成字符串形式。例如：

// 动态获取图片路径
const imgUrl = new URL('/assets/image.jpg', import.meta.url);

// 转换为字符串并设置到src上
this.src = imgSrc.toString();

在这里，`import.meta.url`会提供当前模块的URL，然后我们使用`.toString()`方法将其转换为字符串。记得在模板中绑定这个`src`变量，而不是直接使用`imgUrl`。

Invalid prop: type check failed for prop "modelValue". Expected Number with value 212, got String with value "212".

回答: 根据引用和引用的解释，报错信息"Invalid prop: type check failed for prop "modelValue". Expected Number with value 212, got String with value "212"."的含义是prop "modelValue"的类型检查失败，期望的值是数字类型的212，但是实际获取到的值是字符串类型的"212"。这个错误是由于数据类型不一致而引起的。根据引用的提示，这个错误是在Vue组件中发生的。为了解决这个问题，可以将prop "modelValue"的数据类型修改为数字类型。