reactjs - Importere bilder i TypeScript React - "Finner ikke modul"

Jeg prøver å importere bilder for å bruke dem inne i en React-komponent med TypeScript. Bundleren jeg bruker er Parcel (ikke Webpack).

Jeg har laget en .d.ts-fil inne i prosjektet med bilde filtypen, og inkludert den i tsconfig.json. Men når jeg prøver å importere et bilde, skriker TS på meg om Cannot find module.

Min prosjektstruktur:

+ src
  + assets
    - image.jpg
  + components
    - Box.tsx
    - App.tsx
  - index.d.ts
  - index.html
  - index.tsx
- tsconfig.json
- tslint.json

Jeg prøvde å importere bildet i App.tsx på denne måten. VS Code understreket '../assets/image.jpg' og sa Finner ikke modul '../assets/image.jpg'.

import * as React from 'react';
import * as img from '../assets/image.jpg';

const Box = props => {
  // do things...
}

export default Box;

Diskusjonene jeg fant på nettet peker på behovet for å definere en .d.ts-fil selv, så jeg opprettet den index.d.ts-filen med denne linjen.

declare module '*.jpg';

Deretter la jeg til "include": ["./src/index.d.ts"] inne i tsconfig.json, etter "compilerOptions" : {...}.

Hva gikk jeg glipp av? Hvordan kan jeg fikse feilen TS gir?

Svar #1

Opprett en index.d.ts-fil i mappen src, og legg til denne linjen:

declare module '*.jpg';

Svar #2

Hvis du bokstavelig talt skrev "include": ["./src/index.d.ts"] i tsconfig.json og du ikke har en "files"-innstilling, betyr det at prosjektet definert av tsconfig.json kun inkluderer den enkeltfilen ./src/index.d.ts. Når du åpner en annen fil i VS Code, bruker VS Code en separat språkservice-instans som ikke bruker din tsconfig.json. Juster "include"-innstillingen din for å matche alle .ts og .tsx-filene i prosjektet, eller bare slett den og stol på standardoppførselen med å inkludere alle filer under katalogen som inneholder tsconfig.json.

Runde 2

TypeScript ignorerer index.d.ts fordi det antar at index.d.ts er generert fra index.tsx og index.tsx er mer sannsynlig å være oppdatert. Gi index.d.ts-filen et annet navn, for eksempel declaration.d.ts.

Svar #3

Opprett modul/type

src/types/images.d.ts
declare module '*.jpg';
declare module '*.jpeg';

Endre tsconfig.json

{
    "compilerOptions": {
        "typeRoots" : ["node_modules/@types", "src/types"]
    }
}

Svar #4

Det kan være mange løsninger på dette problemet

Løsning #1:
Bruk require for å inkludere bilde

<img src={require('../../assets/logo.png')} alt="" />

Løsning #2:

I stedet for å importere bilder som import logo from "../../assets/logo.png"

Importer som const logo= require("../../assets/logo.png");

bruk det da som

<img src={logo} alt="" />

Løsning #3:
Det finnes en react-app-env.d.ts-fil i src-mappen din. Hvis du ikke ser den, opprett en ny fil i src-mappen med navnet react-app-env.d.ts.

Nå i din react-app-env.d.ts, legg til denne koden.

declare module "*.png";
declare module "*.svg";
declare module "*.jpeg";
declare module "*.jpg";

Løsning #4:
Opprett declaration.d.ts i src-mappen din.
Legg deretter til følgende tekst i den.

declare module "*.png";
declare module "*.svg";
declare module "*.jpeg";
declare module "*.jpg";

Nå må du få tsconfig.json-filen din til å se slik ut:

{
  "compilerOptions": {},
  "include": [
    "src",
    "src/declaration.d.ts",
  ]
}

Løsning #5:

Opprett en types-mappe i din src-mappe og legg til images.d.ts i denne mappen. Legg til teksten nedenfor i den.

declare module "*.png";
declare module "*.svg";
declare module "*.jpeg";
declare module "*.jpg";

Konfigurer nå tsconfig.json slik:

{
  "compilerOptions": {
    "typeRoots": [
      "node_modules/@types",
      "src/types"
    ],
}

Svar #5

For "react": "^18.2.0" med Typescript gjør følgende:

  1. Opprett en fil kalt: declaration.d.ts i din src/-mappe.
  2. Legg til disse kodelinjene:
declare module "*.jpg"
declare module "*.png"

Det er det, feilen skal være borte.

Lykke til!

Svar #6

det finnes en løsning for det, for eksempel,

import logo from "../../assets/logo.png"

endre dette til

const logo =  require("../../assets/logo.png")

Svar #7

Dette tok meg omtrent en time, så jeg kommer til å legge igjen løsningen som fungerte for meg.

Matt McCutchens løsning fungerte delvis for meg, men jeg sto fortsatt overfor en VSCode-feil. For å bekjempe dette flyttet jeg tsconfig.json og index.d.ts til rotkatalogen, IKKE til src. Nå vil du at tsconfig.json skal se slik ut:

"include": ["src", "index.d.ts"]

Og for din index.d.ts, dette:

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

(^tilpass til dine skrivebehov)

Relaterte artikler