[英]JSX element type 'x' does not have any construct or call signatures
I have an imported image and I want to use it in a function.我有一个导入的图像,我想在函数中使用它。 the image:
图片:
import Edit from 'src/assets/setting/advertising/edit.png';
and this is the function:这是功能:
function getOptions(row) {
return (
<div>
<Edit /> //error
<img src={Edit} /> //error
</div>
);
}
<Edit />
got this error: <Edit />
得到这个错误:
JSX element type 'Edit' does not have any construct or call signatures.
JSX 元素类型“编辑”没有任何构造或调用签名。
and <img src={Edit} />
got this error:和
<img src={Edit} />
得到这个错误:
Type 'StaticImageData' is not assignable to type 'string'.ts(2322)
类型 'StaticImageData' 不可分配给类型 'string'.ts(2322)
what can I do?我能做什么? thank you.
谢谢你。
The two issues are inextricably linked, but they have to be solved differently.这两个问题密不可分,但必须以不同的方式解决。
First issue: You are trying to render an imported static file as a HTML element.第一个问题:您正在尝试将导入的静态文件呈现为 HTML 元素。 You can only render React Components or HTML Elements in React, using that syntax.
您只能使用该语法在 React 中渲染 React 组件或 HTML 元素。
Example:例子:
function MyCustomElement() {
return (
<div>This is custom element<div>
);
}
export default function Page() {
return <div>
<MyCustomElement />
</div>;
}
Second Issue: You're trying to pass in an imported static file as the src
of an image.第二个问题:您试图将导入的静态文件作为图像的
src
传入。 You would need to pass in a string.您需要传入一个字符串。
Example:例子:
const PATH_TO_IMAGE = 'src/assets/setting/advertising/edit.png';
function getOptions(row) {
return (
<div>
<img src={PATH_TO_IMAGE} />
</div>
);
}
Please, note that the value of "src" must be publicly accessible.请注意,“src”的值必须是可公开访问的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.