▷Importación de imágenes de Webpack y mecanografiado ✔️ Foro Ayuda 【 2024 】

Solución:

Alternativamente, en su carpeta custom_typings (si la tiene), puede agregar una nueva import-png.d.ts expediente:

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 (export = syntax). 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';

Necesitas require la imagen y luego use 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"/>
}

Configure el cargador de archivos de Webpack, agregue statement.d.ts y ¡listo!

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

Paso 1

asegúrese de haber instalado file-loader como una dependencia de desarrollo por

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

Paso 2

agregue el cargador correspondiente a la extensión del archivo en las reglas del paquete web webpack.config.js, como esto

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

Paso 3

crear un index.d.ts archivo junto a su tsconfig.json archivo, en realidad puede nombrarlo como desee, 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';

Paso 4

ir a tu tsconfig.json archivar y agregar index.d.ts a la matriz de inclusión como esta:

{
  "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 un include array, mecanografiado 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 compilará. Creo que es una buena práctica tener todo su código dentro de la carpeta src.

¡¡Voila !!

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

Importación de imágenes de Webpack y mecanografiado