首页 文章

为什么我必须在React中使用“require”而不是“import from”来显示图像？

提问于
浏览 次
10

我看到this answer建议导入图像的语法如下所示（注释掉） . 就我而言，它没有在该文件中找到任何模块）而且我不得不切换到当前活动的语法 .

// import Author from "../assets/author.png";
var Author = require("../assets/author.png");

我可以想象的差异是我正在使用TypeScript（通过awesome-typescript-loader转换我的TSX并加载我的PNG文件加载器），他们似乎使用JSX . 但就我的理解而言，这一切都转化为普通的JS并最终要求 .

作为React的菜鸟，我不确定这种差异的原因是什么 but also 我不知道该如何去调查自己 .

reactjs typescript webpack webpack-4

4 回答

  • 5

    您可以为您的图像声明一个模块，如下所示：

    declare module "*.png" {
  const value: any;
  export default value;
}

    然后，您将能够像这样导入图像：

    import AuthorSrc from "../assets/author.png";

    发生这种情况是因为webpack不支持开箱即用的图像导入 . 因此，您需要在webpack配置文件中为其添加规则 . 添加新规则时，TypeScript不会自动知道，因此您需要声明一个新模块来解决此问题 . 如果没有该模块，您将能够导入图像，但TypeScript会抛出错误，因为您没有告诉它是可能的 .

    回复于
  • 1

    这个问题与webpack或任何捆绑器无关，并且对typescript来说不是一个问题 .

    Typescript已声明`require（“path”）是一种将模块包含在当前模块范围内的方法，同时它也可用于读取一些随机文件（例如json文件） .

    正如Vincent和Playma256所指定的那样，您可以声明模块通配符以匹配某些文件类型，因此您可以将其作为import语句导入 . 但你真的不需要这样做 . 如果您尝试导入png或json文件（可能是tslint，但这取决于您的配置），Typescript不会给您错误 .

    顺便说一句，如果您的声明在tsconfig.json中定义的项目的源文件夹中，则不需要按照Playma256的指定包含它 .

    我在节点中创建了一个示例项目供您测试：

    https://github.com/rodrigoelp/typescript-declare-files

    回复于
  • 1

    我认为你可以使用Webpack && typescript来解决这个问题 . 在http://www.159713_中，webpack的官方网页已经介绍了这个问题 . 我自己在_159714中尝试了这个问题 . 原因是你想在TypeScript中使用非代码资产，所以我们需要推迟webpack的这些导入类型 . 你可以简单地添加custom.d.ts .

    declare module "*.jpg" {
    const content: any;
    export default content;
}
    回复于
  • 1

    对于typescript而言，这比webpack本身更具问题，您可能需要在声明文件上声明模块 .

    创建一个 declarations.d.ts

    更新你的tsconfig.json

    "include": [
    "./declarations.d.ts",
],

    把它放在那个文件上：

    declare module '*.png';

    错误可能会消失 .

    回复于

相关问题