无法使用 create-react-app 导入图像

IT技术 reactjs typescript webpack create-react-app
2021-05-05 07:06:08

我正在使用create-react-app，并且正在努力加载图像。我正在按照此处指定的说明进行操作，但我一直看到以下错误：

Failed to compile.

Error in ./src/components/Home/imageIndex.ts
(1,24): error TS2307: Cannot find module './party.png'

有谁知道为什么当我运行yarn start我的应用程序时仍然无法编译？

我有一个Home组件，这就是我导入文件的方式：

import photo from './party.png';

组件位于src/components/Home/index.tsx.png 文件中src/components/Home/party.png。

这是我的 package.json：

{
  "name": "eai-reactjs-typescript-redux-starter",
  "description": "A ReactJS/TypeScript + Redux starter template with a detailed README describing how to use these technologies together and constructive code comments.",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.5",
    "redux": "^3.7.0",
    "redux-logger": "^3.0.6"
  },
  "devDependencies": {
    "@types/enzyme": "^2.8.0",
    "@types/jest": "^19.2.3",
    "@types/node": "^7.0.18",
    "@types/react": "^15.0.24",
    "@types/react-dom": "^15.5.0",
    "@types/react-redux": "^4.4.40",
    "@types/redux-logger": "^3.0.0",
    "enzyme": "^2.8.2",
    "react-addons-test-utils": "^15.5.1",
    "react-scripts-ts": "1.4.0",
    "redux-devtools-extension": "^2.13.2"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  }
}
4个回答

你确定你有正确的路径吗？此外，当您通过 css 导入图像时（如您提到的示例中所做的那样），您需要提供相对于公共文件夹而不是 src 文件夹的路径。我已经多次遇到这个问题。

使用导入的示例：

import Image from './img.png'
...
// react example
...
render() {
    return (
        <img src={Image}/> // notice the curly
...

并不是

<img src="Image"/>

我遇到了同样的问题，并且能够用 require 语句解决。

const photo = require('./party.png');

然后在您的组件中使用如下所示：

render() {
    return (
        <img src={photo}/>

另请参阅这篇文章使用 React、Typescript 和 Webpack 显示静态图像

正如@archae0pteryx 提出的那样，将图片与代码分开会更好，因此应使用项目公共文件夹而不是src。

这是它如何与css 一起使用：

  1. 将“img.bmp”复制到/public
  2. 在 .css 文件/类中： background-image: url('/img.bmp');

你可以简单地使用这样的东西：

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in “Adding Images and Fonts” above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

直接引用自 CRA文档

其它你可能感兴趣的问题
上一篇跳过 Y 步，仅在使用 Ultimaker Cura 时 下一篇崩溃后的MINTEMP错误