Tengo una imagen importada y quiero usarla en una función. la imagen:
import Edit from 'src/assets/setting/advertising/edit.png';
y esta es la función:
function getOptions(row) { return ( <div> <Edit /> //error <img src={Edit} /> //error </div> ); }
<Edit />
obtuvo este error:
El tipo de elemento JSX 'Editar' no tiene ninguna construcción ni firma de llamada.
y <img src={Edit} />
obtuvo este error:
El tipo 'StaticImageData' no se puede asignar al tipo 'string'.ts(2322)
¿Qué puedo hacer? gracias.
Los dos problemas están inextricablemente vinculados, pero deben resolverse de manera diferente.
Primer problema: está intentando representar un archivo estático importado como un elemento HTML. Solo puede representar componentes de React o elementos HTML en React, usando esa sintaxis.
Ejemplo:
function MyCustomElement() { return ( <div>This is custom element<div> ); } export default function Page() { return <div> <MyCustomElement /> </div>; }
Segundo problema: está intentando pasar un archivo estático importado como el src
de una imagen. Tendrías que pasar una cadena.
Ejemplo:
const PATH_TO_IMAGE = 'src/assets/setting/advertising/edit.png'; function getOptions(row) { return ( <div> <img src={PATH_TO_IMAGE} /> </div> ); }
Tenga en cuenta que el valor de "src" debe ser de acceso público.