reactjs - ייבוא תמונות ב-TypeScript React - "לא ניתן למצוא את המודול"

אני מנסה לייבא תמונות לשימוש בתוך קומפוננטת React עם TypeScript. האספן שאני משתמש בו הוא Parcel (לא Webpack).

יצרתי קובץ .d.ts בתוך הפרויקט עם סיומת קובץ תמונה, וכללתי אותו בתוך tsconfig.json. עם זאת, כאשר אני מנסה לייבא תמונה, TypeScript צועק עלי לגבי Cannot find module.

מבנה הפרויקט שלי:

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

ניסיתי לייבא את התמונה ב-App.tsx כך. VS Code סגר בקו תחתון את '../assets/image.jpg' ואמר Cannot find module '../assets/image.jpg'.

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

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

export default Box;

הדיונים שמצאתי באינטרנט מצביעים על הצורך להגדיר בעצמי קובץ .d.ts, אז יצרתי את קובץ index.d.ts הזה עם השורה הזו.

declare module '*.jpg';

ואז הוסיפו "include": ["./src/index.d.ts"] בתוך tsconfig.json, אחרי "compilerOptions" : {...}.

מה פיספסתי? איך אני יכול לתקן את השגיאה שטי אס זורק?

תשובה #1

צור קובץ index.d.ts בתיקיה src, והוסף את השורה הזו:

declare module '*.jpg';

תשובה #2

אם כתבת במילא "include": ["./src/index.d.ts"] ב-tsconfig.json ואין לך הגדרת "files", זה אומר שהפרויקט שמוגדר על ידי tsconfig.json כולל רק את הקובץ היחיד ./src/index.d.ts. כשאתה פותח כל קובץ אחר ב-VS Code, VS Code משתמש במופע שירות שפה נפרד שאינו משתמש ב-tsconfig.json שלך. התאם את הגדרת "include" שלך כדי שתתאים לכל קבצי .ts ו-.tsx בפרויקט שלך, או פשוט מחק אותה ותסתמך על ההתנהגות המוגדרת מראש של הכללת כל הקבצים בתיקייה שמכילה את tsconfig.json.

סיבוב 2

TypeScript מתעלם מ-index.d.ts כי הוא מניח ש-index.d.ts נוצר מ-index.tsx וש-index.tsx סביר יותר שיהיה מעודכן. תן לקובץ שלך index.d.ts שם אחר, למשל declaration.d.ts.

תשובה #3

צור מודול/סוג

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

שנה את tsconfig.json

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

תשובה #4

יכול להיות הרבה פתרונות לבעיה הזאת

פתרון #1:
השתמש ב-require כדי לכלול תמונה

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

פתרון #2:

במקום לייבא תמונות כ־import logo from "../../assets/logo.png"

ייבא כ-const logo=require("../../assets/logo.png");

אז השתמש בזה כמו

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

פתרון #3:
יש קובץ react-app-env.d.ts בתיקיית src שלך. אם אתה לא רואה אותו, צור קובץ חדש בתיקיית src בשם react-app-env.d.ts.

עכשיו ב-react-app-env.d.ts שלך, הוסף את הקוד הזה.

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

פתרון #4:
צור את declaration.d.ts בתיקיית src שלך.
לאחר מכן הוסף בו את הטקסט הבא.

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

עכשיו אתה צריך לגרום ל-tsconfig.json שלך להיראות כך:

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

פתרון #5:

צור תיקייה types בתיקייה src שלך והוסף בה את images.d.ts. הוסף בה את הטקסט הבא.

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

עכשיו הגדר את tsconfig.json כך:

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

תשובה #5

עבור "react": "^18.2.0" עם TypeScript בצע את הפעולות הבאות:

1. צור קובץ בשם: declaration.d.ts בתיקייה src/ שלך.
2. הוסף את שורות הקוד האלה:

declare module "*.jpg"
declare module "*.png"

זהו, הטעות אמורה להיות נעלמה.

בהצלחה!

תשובה #6

יש לזה פתרון עוקף, למשל,

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

שנה זאת ל

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

תשובה #7

זה לקח לי בערך שעה אז אני הולך להשאיר את הפתרון שעבד לי.

הפתרון של מאט מקקאצ'ן עבד חלקית בשבילי, אבל עדיין נתקלתי בשגיאה ב-VSCode. כדי להתמודד עם זה, העברתי את הקובץ tsconfig.json ואת index.d.ts לתיקיית השורש, לא ל-src. עכשיו אתה רוצה שה-tsconfig.json שלך ייראה כך:

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

ולקובץ index.d.ts שלך, זה:

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

(^התאמה אישית לצרכי ההקלדה שלך)