Estoy trabajando en una aplicación React y uso Webpack & Typescript . Me gustaría usar una imagen en una de las <img/> . Sin embargo, no encontré la forma correcta de tener acceso a los archivos de imagen.
webpack.config.js :
... module: { rules: [ ... { test: /\.(png|jpe?g|svg)$/, loader: 'file-loader', options: { name: 'assets/[name].[ext]', } } ]aplicación.tsx :
... render() { return <img src='/assets/logo-large.png' alt="logo"/> } Al ejecutar la aplicación, no se encuentra el recurso assets/logo-large.png .
Alternativamente, en su carpeta custom_typings (si la tiene), puede agregar un nuevo archivo import-png.d.ts :
declare module "*.png" { const value: any; export default value; }Entonces puedes importar una imagen usando:
import myImg from 'img/myImg.png';Alternativamente, según lo informado por @mario-petrovic, a veces necesita usar una opción de exportación diferente como se muestra a continuación (exportar = sintaxis). Vea aquí las diferencias entre los dos enfoques:
declare module "*.png" { const value: any; export = value; }En cuyo caso, probablemente necesite importar la imagen como:
import * as myImg from 'img/myImg.png';después de pasar algún tiempo para encontrar la solución, esto es lo que hice...
asegúrese de haber instalado file-loader como una dependencia dev por
npm install -D file-loader , si usa yarn yarn add -D file-loader
agregue el cargador correspondiente a la extensión de archivo en las reglas de webpack.config.js , así
module: { rules: [ ..., { test: /\.(png|jpe?g|gif|jp2|webp)$/, loader: 'file-loader', options: { name: '[name].[ext]', }, }, ], }, cree un archivo index.d.ts junto a su archivo tsconfig.json , en realidad puede nombrarlo como quiera, pero debe seguir el paso 4.
Dado que Webpack ahora manejará varias extensiones de imagen, puede agregar otros formatos de imagen compatibles con el cargador de archivos.
declare module '*.png'; declare module '*.jpg'; vaya a su archivo tsconfig.json y agregue index.d.ts a la matriz de inclusión de esta manera:
{ "compilerOptions": { ..., "jsx": "react", "esModuleInterop": true, "target": "ES2020", "moduleResolution": "node" }, "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"], "include": ["src", "index.d.ts"] /// <-- Like this!! } tenga en cuenta que si no ha definido una matriz de include , TypeScript de forma predeterminada agregará todos los archivos en la carpeta raíz, si solo define un archivo y no el archivo que contiene todo su código, no se va a compilar. Creo que es una buena práctica tener todo su código dentro de la carpeta src.
¡Voila!
Debe require la imagen y luego usar esa variable como fuente, así:
// At the top of the file, with all other imports/requires const imageSrc = require('/assets/logo-large.png') ... render() { return <img src={String(imageSrc)} alt="logo"/> }