TypeScript React에서 이미지 Import - "모듈을 찾을 수 없습니다"

TypeScript React에서 이미지 Import - "모듈을 찾을 수 없습니다"

TypeScript를 사용하여 React 컴포넌트에서 사용할 이미지를 Import하려고 합니다.사용하고 있는 번들러는 Parcel(Webpack이 아님)입니다.

는 작했 a a a를 ..d.ts확장자를 하여 프로젝트 에 파일을 하고, 파일 확장자를 포함하여 프로젝트 을 포함시킵니다.tsconfig.json가 「Import」라고 Cannot find module.

프로젝트 구조:

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

Import에서 .App.tsx 밑줄 친 VS 코드'../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"]에 inside inside inside tsconfig.json에, 에, 에, 에"compilerOptions" : {...}.

내가 뭘 놓쳤지?TS에서 발생하는 오류를 수정하려면 어떻게 해야 합니까?

index.d.ts 내의 src 이

declare module '*.jpg';

이 문자 약약당 if if if if라고 "include": ["./src/index.d.ts"]tsconfig.json '이렇게 하다'도없고요."files"setting). 즉, '', '프로젝트', '프로젝트'로 됩니다.tsconfig.json에는, 1 개의 「」만이 됩니다../src/index.d.ts코드에서 는 VS 코드를 사용하지 않는 별도의 언어 서비스 tsconfig.json해 "include" ""에 .ts ★★★★★★★★★★★★★★★★★」.tsx만 하면 .또, 「Directory」의 모든 합니다.tsconfig.json.

2라운드

가 TypeScript를 합니다.index.d.ts은 라라가 that that that that that that that that that that that that that라고 가정하기 때문이다.index.d.ts됩니다.index.tsx ★★★★★★★★★★★★★★★★★」index.tsx더 최신일 가능성이 높습니다.의 을 대세요.index.d.ts something file something file file른른른 something something something)을 하다declaration.d.ts.

모듈/유형 생성

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

tsconfig.json 변경

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

예를 들어, 그것에 대한 작업이 있다.

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

이것을 로 변경하다

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

이 작업은 1시간 정도 걸리기 때문에 저에게 효과가 있었던 솔루션을 남깁니다.

Matt McCutchen의 솔루션은 제게는 반쯤 효과가 있었지만, 저는 여전히 VSCode 오류를 겪고 있었습니다.이를 방지하기 위해 tsconfig.json과 index.d.ts를 src가 아닌 루트 디렉토리로 이동했습니다.tsconfig.json을 다음과 같이 만듭니다.

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

또한 index.d.ts의 경우 다음과 같습니다.

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

(^ 입력 요구에 맞게 조정)

에는 여러 수 있습니다.

루 11:
require를 포함하다

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

---

솔루션 2:

「 Import 」로서 Import 하는 것이 , 「Import 」로서 합니다.import logo from "../../assets/logo.png"

as 으로 const logo = require("../../assets/logo.png");

사용법

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

---

★★★★★
게 요.react-app-env.d.tssrc 파일이 않으면 새로 을 만듭니다.src " " " " "react-app-env.d.ts.

의 이 your your your react-app-env.d.ts이합니다. , 이 코드를 사용하세요.

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

---

루 44:
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"
    ],
}

---

create-react-app을 사용할 때 생성되는 "react-app-env.d.ts"라는 파일이 있어야 합니다.이 파일은 Import 가능한 모듈로 모든 유형의 이미지 파일을 분류합니다.파일 내에는 다음과 같은 것이 있습니다.

/// <reference types="react-scripts" />

위해서"react": "^18.2.0"Typescript를 사용하여 다음 작업을 수행합니다.

1. 다음 파일을 만듭니다.declaration.d.ts당신의 안에서src/dir.
2. 다음 코드 행을 추가합니다.

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

그게 바로 오류를 꺼야 한다는 겁니다.

잘 잠궜어!

여러 이미지 유형을 선언하고 VS 코드를 만족시키기 위해 별도의 .d.ts 파일에 저장해야 했습니다.

src/types/image.jpg.d.ts:

declare module '*.jpg' {
  import { ImageSourcePropType } from 'react-native'

  const content: ImageSourcePropType

  export default content
}

src/types/image.png.d.ts:

declare module '*.png' {
  import { ImageSourcePropType } from 'react-native'

  const content: ImageSourcePropType

  export default content
}

src/types/image.sqg.d.ts:

declare module '*.svg' {
  import React from 'react'
  import { SvgProps } from 'react-native-svg'

  const content: React.FC<SvgProps>

  export default content
}

tsconfig 등을 조정할 필요가 없습니다.

src 디렉토리 또는 임의의 rootDir 내에 global.d.ts 파일을 만듭니다.

declare module "*.png" {
 export default "" as string
}

그러면 자산(이 경우 png 이미지)이 사용되고 vscoode 오류도 지워집니다.

붙여넣기 완료:

/// <reference types="react-scripts" />

이전 프로젝트에서 가져온 것입니다.react-app-env.d.ts그리고 그것은 성공하였다.

의 최신 버전에서는CRA(경우TS는 선택된 언어입니다). 이 파일은 자동으로 src 폴더에 추가되며 위의 한 행이 포함됩니다.이것은 타입을 참조하기 위한 지시입니다.react-scripts.

이것은 나에게 효과가 있다.

declare module "*.png" {
const src: string
export default src
}

나는 모든 답장을 테스트했고 답을 찾았다.

먼저 이름을 가진 파일을 만듭니다..d.ts를 참조해 주세요.

그리고 이 선들을 거기에 복사하세요.

declare module "*.png" {
  export default "" as string;
}
declare module "*.svg" {
  export default "" as string;
}
declare module "*.jpeg" {
  export default "" as string;
}
declare module "*.jpg" {
  export default "" as string;
}

마지막으로 루트 폴더의 tsconfig.json 파일로 이동합니다.새로운 아이를 정의합니다.

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

넌 갈 거야

이 에러는, 이 에러를 없애려면 , 2 행의 코드가 필요하기 때문에, src 폴더에 react-app-env.d.ts 파일을 포함하지 않은 경우에 발생합니다.== ><reference types="react-scripts" />

root에 index.d.ts 파일을 추가하는 것을 수정했습니다.

그 안에 다음 코드를 붙여 넣습니다.<reference types="react-scripts"

-

tsconfig.json 내부 추가:"include": ["src", "index.d.ts"]

언급URL : https://stackoverflow.com/questions/52759220/importing-images-in-typescript-react-cannot-find-module