[英]cannot import image with create-react-app
I'm using create-react-app
, and I am struggling to load images.我正在使用
create-react-app
,并且正在努力加载图像。 I am following the instructions as specified here , but I keep seeing the following error:我正在按照此处指定的说明进行操作,但我一直看到以下错误:
Failed to compile.
Error in ./src/components/Home/imageIndex.ts
(1,24): error TS2307: Cannot find module './party.png'
Does anyone know why when I run yarn start
my app continues to fail to compile?有谁知道为什么当我运行
yarn start
我的应用程序仍然无法编译?
I have a Home
component and this is how I am importing the file:我有一个
Home
组件,这就是我导入文件的方式:
import photo from './party.png';
The component is located in src/components/Home/index.tsx
and the png file is located in src/components/Home/party.png
.组件位于
src/components/Home/index.tsx
,png 文件位于src/components/Home/party.png
。
here is my package.json:这是我的 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"
}
}
Are you sure you've got the correct path?你确定你有正确的路径吗? Also when you import an image via css (as is done in the example you mentioned) you need to give a path relative to the public folder and not the src folder.
此外,当您通过 css 导入图像时(如您提到的示例中所做的那样),您需要提供相对于公共文件夹而不是 src 文件夹的路径。 I have run into this problem several times.
我已经多次遇到这个问题。
An example using import:使用导入的示例:
import Image from './img.png'
...
// react example
...
render() {
return (
<img src={Image}/> // notice the curly
...
and not并不是
<img src="Image"/>
I had the same problem and was able to solve with a require statement.我遇到了同样的问题,并且能够用 require 语句解决。
const photo = require('./party.png');
and then in your component use that like:然后在您的组件中使用类似:
render() {
return (
<img src={photo}/>
also see this post Displaying a static image using React, Typescript and Webpack另请参阅这篇文章使用 React、Typescript 和 Webpack 显示静态图像
As @archae0pteryx proposed it is much better to separate pictures from the code, so the project public folder should be used instead of src .正如@archae0pteryx 提出的,将图片与代码分开会更好,因此应使用项目公共文件夹而不是src 。
Here is how it works with css :这是它如何与css 一起使用:
background-image: url('/img.bmp');
background-image: url('/img.bmp');
You can simply use something like this:你可以简单地使用这样的东西:
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'} />;
}
By default, Create-React-App
uses url-loader
for files with size 10000 bytes默认情况下,
Create-React-App
对大小为 10000 字节的文件使用url-loader
that works fine in the development environment, but in production reduce error.这在开发环境中工作正常,但在生产中减少错误。
For a production environment, you should change the value for the limit of bytes in order to enforce webpack use file-loader instead.对于生产环境,您应该更改字节限制的值,以强制 webpack 使用 file-loader。
If you have to eject your app modify webpack.config.prod.js
file and change the limit of url-loader
to 10
and will work as well如果您必须弹出您的应用程序,请修改
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]',
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.