Webpack &打字稿图像导入 [英] Webpack & Typescript image import

问题描述

我正在开发一个 React 应用程序并使用 Webpack &打字稿.我想在 <img/> 标签之一中使用图像.但是，我没有找到访问图像文件的正确方法.

I'm working on a React application and using Webpack & Typescript. I would like to use an image in one of the <img/> tags. However, I did not find the proper way to have access to the image files.

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"/>
}

运行应用程序时，找不到 assets/logo-large.png 资源.

When running the app, the assets/logo-large.png resource is not found.

推荐答案

设置Webpack文件加载器，添加declaration.d.ts，瞧！

在花了一些时间找出解决方案之后，这就是我所做的......

Setup Webpack file-loader, add declaration.d.ts, and voila!

after spending some time to figure out the solution, this is what I did...

确保你已经安装 file-loader 作为开发依赖

ensure that you have installed file-loader as a dev dependency by

npm install -D file-loader，如果你使用yarn yarn add -D file-loader

npm install -D file-loader, if you use yarn yarn add -D file-loader

在Webpack规则webpack.config.js中添加文件扩展名对应的loader，像这样

add the loader corresponding to the file extension in the Webpack rules webpack.config.js, like this

module: {
    rules: [
      ...,
      {
        test: /\.(png|jpe?g|gif|jp2|webp)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      },
    ],
  },

步骤 3

在您的 tsconfig.json 文件旁边创建一个 index.d.ts 文件，实际上您可以随意命名它，但您必须按照第 4 步操作.

Step 3

create an index.d.ts file next to your tsconfig.json file, actually you can name it whatever you want but you have to follow step 4.

由于 Webpack 现在将处理多个图像扩展，因此您可以添加 file 支持的其他图像格式-加载器

Since Webpack now is going to handle several image extensions so you can add other image formats supported by file-loader

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

步骤 4

转到您的 tsconfig.json 文件并将 index.d.ts 添加到包含数组中，如下所示:

Step 4

go to your tsconfig.json file and add index.d.ts to the include array like this:

{
  "compilerOptions": {
    ...,
    "jsx": "react",
    "esModuleInterop": true,
    "target": "ES2020",
    "moduleResolution": "node"
  },
  "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"],
  "include": ["src", "index.d.ts"] /// <-- Like this!!
}

请注意，如果您尚未定义 include 数组，则默认情况下打字稿将添加根文件夹中的所有文件，如果您只定义一个文件而不是包含的文件你所有的代码都不会编译.我认为将所有代码放在 src 文件夹中是一个好习惯.

be aware that if you haven't defined an include array, typescript by default is going to add all the files on the root folder, if you just define one file and not the file that contains all your code it is not going to compile. I think is a good practice to have all your code within the src folder.

瞧！！

这篇关于Webpack &打字稿图像导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！