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:
JSX element type 'Edit' does not have any construct or call signatures.
and <img src={Edit} /> got this error:
Type 'StaticImageData' is not assignable to type '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. You can only render React Components or HTML Elements in React, using that syntax.
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. 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.