reactjs - Importación de imágenes en Webpack y Typescript

Estoy trabajando en una aplicación React y usando Webpack y Typescript. Me gustaría usar una imagen en una de las etiquetas <img/>. Sin embargo, no encontré la manera adecuada 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]',
                }
            }
        ]

app.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.

Respuesta #1

Alternativamente, en tu carpeta custom_typings (si tienes esa), puedes agregar un nuevo archivo import-png.d.ts:

declare module "*.png" {
  const value: any;
  export default value;
}

Así que puedes importar una imagen usando:

import myImg from 'img/myImg.png';

Alternativamente, como informó @mario-petrovic, a veces necesitas usar una opción de exportación diferente como se muestra a continuación (export=syntax). Consulta aquí las diferencias entre los dos enfoques:

declare module "*.png" {
  const value: any;
  export = value;
}

En ese caso, probablemente necesites importar la imagen como:

import * as myImg from 'img/myImg.png';

Respuesta #2

Configura Webpack file-loader, añade declaration.d.ts, ¡y voilà!

Después de pasar un tiempo para encontrar la solución, esto es lo que hice...

Paso 1

asegúrate de haber instalado file-loader como una dependencia de desarrollo mediante

npm install -D file-loader, si usas yarn yarn add -D file-loader

Paso 2

agrega el cargador correspondiente a la extensión de archivo en las reglas de Webpack webpack.config.js, así:

module: {
    rules: [
      ...,
      {
        test: /\.(png|jpe?g|gif|jp2|webp)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      },
    ],
  },

Paso 3

crea un archivo index.d.ts junto a tu archivo tsconfig.json, en realidad puedes nombrarlo como quieras pero tienes que seguir el paso 4.

Dado que Webpack ahora va a manejar varias extensiones de imagen, puedes agregar otros formatos de imagen compatibles con file-loader

declare module '*.png';
declare module '*.jpg';

Paso 4

ve a tu archivo tsconfig.json y añade index.d.ts al arreglo include así:

{
  "compilerOptions": {
    ...,
    "jsx": "react",
    "esModuleInterop": true,
    "target": "ES2020",
    "moduleResolution": "node"
  },
  "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"],
  "include": ["src", "index.d.ts"] /// <-- Like this!!
}

ten en cuenta que si no has definido un arreglo include, typescript por defecto va a agregar todos los archivos en la carpeta raíz, si solo defines un archivo y no el archivo que contiene todo tu código, no se va a compilar. Creo que es una buena práctica tener todo tu código dentro de la carpeta src.

¡Voilà!

Respuesta #3

Necesitas require la imagen y luego usar esa variable como la 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"/>
}