我已经使用安装了React create-react- app。它安装得很好,但是我试图将图像加载到我的一个组件(Header.js,文件路径:)中,src/components/common/Header.js但是没有加载。这是我的代码:
create-react- app
Header.js
src/components/common/Header.js
import React from 'react'; export default () => { var logo1 = ( <img //src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-goose.jpg" src={'/src/images/logo.png'} alt="Canvas Logo" /> ); return ( <div id="header-wrap"> <div className="container clearfix"> <div id="primary-menu-trigger"> <i className="icon-reorder"></i> </div> <div id="logo"> <a href="/" className="standard-logo" data-dark-logo='/images/logo-dark.png'>{logo1}</a> <a href="/" className="retina-logo" data-dark-logo='/images/[email protected]'> <img src='/var/www/html/react-demo/src/images/[email protected]' alt="Canvas Logo" /> </a> </div> </div> </div> ); }
如果我src={require('./src/images/logo.png')}在logo1变量中写入图像路径,则会出现错误:
src={require('./src/images/logo.png')}
logo1
编译失败。 ./src/Components/common/Header.js中的错误 找不到模块:/ var / www / html / wistful / src / Components / common中的./src/images/logo.png
编译失败。
./src/Components/common/Header.js中的错误
找不到模块:/ var / www / html / wistful / src / Components / common中的./src/images/logo.png
请帮我解决这个问题。让我知道我在这里做错了。
如果您对创建有任何疑问,React App建议您阅读其用户指南。 它回答了这个问题以及您可能遇到的许多其他问题。
React App
具体来说,要包含本地图像,您有两个选择:
// Assuming logo.png is in the same folder as JS file import logo from './logo.png'; // ...later <img src={logo} alt="logo" />
这种方法很棒,因为所有资产都由构建系统处理,并且将在生产构建中获取带有哈希的文件名。如果文件被移动或删除,您也会收到错误消息。
不利的一面是,如果您有数百张图片,可能会很麻烦,因为您不能拥有任意的导入路径。
// Assuming logo.png is in public/ folder of your project <img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />
通常不建议使用这种方法,但是如果您有数百张图像,并且一次导入一个图像太麻烦了,那就太好了。缺点是您必须考虑缓存清除,并自己注意移动或删除的文件。
希望这可以帮助!