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.png
niet gevonden.
Antwoord 1, autoriteit 100%
Als alternatief kun je in je custom_typings map (als je die hebt), een nieuw import-png.d.ts
bestand 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-loader
hebt 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.ts
bestand naast je tsconfig.json
bestand, 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.ts
als 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 require
en 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-plugin
kan 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' />
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} />