Webpack & Typescript afbeelding importeren

Ik werk aan een React-toepassing en gebruik Webpack& Typescript. Ik wil graag een afbeelding gebruiken in een van de <img/>tags. Ik heb echter niet de juiste manier gevonden om toegang te krijgen tot de afbeeldingsbestanden.

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"/>
}

Tijdens het uitvoeren van de app wordt de bron assets/logo-large.pngniet gevonden.


Antwoord 1, autoriteit 100%

Als alternatief kun je in je custom_typings map (als je die hebt), een nieuw import-png.d.tsbestand toevoegen:

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

Je kunt dus een afbeelding importeren met:

import myImg from 'img/myImg.png';

Als alternatief, zoals gemeld door @mario-petrovic, moet u soms een andere exportoptie gebruiken, zoals hieronder (export = syntaxis). Zie hiervoor de verschillen tussen de twee benaderingen:

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

In dat geval moet u de afbeelding waarschijnlijk importeren als:

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

Antwoord 2, autoriteit 48%

Stel Webpack file-loader in, voeg declaratie.d.ts toe, en voila!

na wat tijd te hebben besteed aan het bedenken van de oplossing, heb ik dit gedaan…

Stap 1

zorg ervoor dat je file-loaderhebt geïnstalleerd als ontwikkelaar van

npm install -D file-loader, als u garen yarn add -D file-loader

gebruikt

Stap 2

voeg de lader toe die overeenkomt met de bestandsextensie in de Webpack-regels webpack.config.js, zoals deze

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

Stap 3

maak een index.d.tsbestand naast je tsconfig.jsonbestand, eigenlijk kun je het een naam geven wat je wilt, maar je moet stap 4 volgen.

Aangezien Webpack nu verschillende afbeeldingsextensies gaat verwerken, kunt u andere afbeeldingsindelingen toevoegen die worden ondersteund door het bestand -lader

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

Stap 4

ga naar uw tsconfig.json-bestand en voeg index.d.tsals volgt toe aan de include-array:

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

houd er rekening mee dat als u geen include-array hebt gedefinieerd, typoscript standaard alle bestanden in de hoofdmap toevoegt, als u slechts één bestand definieert en niet het bestand dat al je code gaat het niet compileren. Ik denk dat het een goede gewoonte is om al je code in de src-map te hebben.

Voila!!


Antwoord 3, autoriteit 35%

Je moet de afbeelding requireen dan die variabele als bron gebruiken, zoals:

// 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"/>
}

Antwoord 4, autoriteit 2%

De copy-webpack-pluginkan je probleem ook oplossen, als je veel afbeeldingen hebt, kun je ze allemaal vanuit één centrale dist-map bedienen.

npm install --save-dev copy-webpack-plugin

   plugins: [
        ...
        ...
        new CopyWebpackPlugin([
            {from:'src/images',to:'images'} 
        ]), 
    ...
    ]

Nee, u kunt gewoon bij het relatieve pad naar uw afbeeldingstag:

<img src='images/your-image.png' />

Bron: https://medium.com/a-beginners-guide-for-webpack-2/copy-all-images-files-to-a-folder-using-copy-webpack -plugin-7c8cf2de7676


Antwoord 5, autoriteit 2%

Eigenlijk heeft u geen webpack nodig voor het gebruik van webpafbeeldingen. Deze oplossing werkt ook voor op TypeScripten JavaScriptgebaseerde react-apps. TypeScript geeft een foutmelding als je webpafbeelding probeert te importeren als ReactComponent. U moet het dus niet als component importeren, maar alleen de afbeeldingsbron gebruiken. Bekijk dit voorbeeld:

import img from "./images/image.webp";

Je kunt deze src nu op deze manier in je -tag gebruiken.

<img src={img} />

Other episodes