在 TypeScript React 中导入图像 - “找不到模块”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52759220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Importing images in TypeScript React - "Cannot find module"
提问by John
I am trying to import images to use inside a React component with TypeScript. The bundler I'm using is Parcel (not Webpack).
我正在尝试使用 TypeScript 导入要在 React 组件中使用的图像。我使用的打包器是 Parcel（不是 Webpack）。
I have created a .d.tsfile inside the project with the image file extension, and included it inside tsconfig.json. However, when I try to import an image, TS yells at me about Cannot find module.
我.d.ts在项目中创建了一个带有图像文件扩展名的文件，并将其包含在tsconfig.json. 但是，当我尝试导入图像时，TS 对我大喊大叫Cannot find module。
My project structure:
我的项目结构：
+ src
+ assets
- image.jpg
+ components
- Box.tsx
- App.tsx
- index.d.ts
- index.html
- index.tsx
- tsconfig.json
- tslint.json
I tried to import the image in App.tsxlike this. VS Code underlined '../assets/image.jpg'and said Cannot find module '../assets/image.jpg'.
我试图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;
The discussions I found online point to the need of defining a .d.tsfile myself, so I created that index.d.tsfile with this line.
我在网上找到的讨论指出需要.d.ts自己定义一个文件，所以我index.d.ts用这一行创建了该文件。
declare module '*.jpg';
Then added "include": ["./src/index.d.ts"]inside tsconfig.json, after "compilerOptions" : {...}.
然后加"include": ["./src/index.d.ts"]在里面tsconfig.json，之后"compilerOptions" : {...}。
What did I miss? How can I fix the error TS is throwing?
我错过了什么？如何修复 TS 抛出的错误？
采纳答案by Matt McCutchen
If you literally wrote "include": ["./src/index.d.ts"]in tsconfig.jsonand you don't have a "files"setting, that means the project defined by tsconfig.jsonincludes only the single file ./src/index.d.ts. When you open any other file in VS Code, VS Code uses a separate language service instance that doesn't use your tsconfig.json. Adjust your "include"setting to match all the .tsand .tsxfiles in your project, or just delete it and rely on the default behavior of including all files under the directory containing tsconfig.json.
如果你从字面上写"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.
Round 2
第二轮
TypeScript is ignoring index.d.tsbecause it assumes that index.d.tsis generated from index.tsxand index.tsxis more likely to be up to date. Name your index.d.tsfile something else, e.g., declaration.d.ts.
TypeScript 忽略了index.d.ts它，因为它假设它index.d.ts是从生成的index.tsx并且index.tsx更有可能是最新的。将您的index.d.ts文件命名为其他名称，例如declaration.d.ts.
回答by u8409280
create index.d.ts file in folder src,and add this line
在文件夹中创建 index.d.ts 文件src，并添加这一行
declare module '*.jpg';
回答by Shubham Kakkar
there is a work around to it for example,
例如，有一个解决方法，
import logo from "../../assets/logo.png"
change this to
将此更改为
const logo = require("../../assets/logo.png")
回答by Youssef Muhamad
I've pasted:
我已经粘贴了：
// eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />
from an older project in my: react-app-env.d.tsand it worked.
来自 my: 中的一个较旧的项目react-app-env.d.ts，它奏效了。
