▷Importación de imagen Webpack y TypeScript ✔️ Foro Ayuda 【 2024 】

Esta es la contestación más válida que te podemos compartir, pero mírala pausadamente y analiza si se adapta a tu trabajo.

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 (exportación = 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';

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

Configure el cargador de archivos Webpack, agregue declare.d.ts y listo.

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

Paso 1

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

npm install -D file-loadersi usas hilo yarn add -D file-loader

Paso 2

agregue el cargador correspondiente a la extensión de archivo en las reglas de Webpack webpack.config.jsMe gusta esto

module: 
    rules: [
      ...,
      
        test: /.(png,
    ],
  ,

Paso 3

crear un index.d.ts archivo junto a su tsconfig.json archivo, 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';

Etapa 4

ir a tu tsconfig.json archivar y agregar index.d.ts a la incluyen array Me gusta esto:


  "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!

Recuerda difundir esta noticia si te valió la pena.

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

Importación de imagen Webpack y TypeScript