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.