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

Question

我正在使用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"
  }
}

- robskrob

Answer 1

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

一个使用import的示例：

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

而不是

<img src="Image"/>

- rimraf

---

由于他正在使用TypeScript，因此他还必须排除他的.png文件的定义，正如pscanf在这里所提到的https://github.com/wmonk/create-react-app-typescript/issues/172。 - ylastapis

Answer 2

我曾经遇到同样的问题，并且通过一个 require 语句解决了它。

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

然后在你的组件中使用它，就像这样：

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

另外请参阅此帖子：使用React、Typescript和Webpack显示静态图像

- melmquist

Answer 3

正如@archae0pteryx所建议的那样，最好将图片与代码分开，因此应该使用项目公共文件夹而不是src。

以下是在css中的使用方法：

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

- krankuba

Answer 4

您可以简单地使用类似以下的方式：

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 文档

- Vaibhav Vishal

Answer 5

默认情况下，Create-React-App 使用 url-loader 来处理大小为 10000 字节的文件，在开发环境中这个方法很好用，但在生产环境中会出现错误。因此，在生产环境中，你应该改变字节数限制的值以强制 webpack 使用 file-loader。如果你必须弹出你的应用程序，则需要修改 webpack.config.prod.js 文件，并将 url-loader 的限制更改为 10，这样也可以正常工作。

{
 test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
 loader: require.resolve('url-loader'),
 options: {
 limit: 10,
 name: 'static/media/[name].[hash:8].[ext]',
},

- xargr