[英]How to Load Images in React?
我正在尝试在我的 React.js 应用程序中加载图像,但无法加载它们。 我看过一堆SO问题,但没有一个解决它。 在模块和规则下的 webpack.config.js 文件中,我有 url 加载器。
{
test: /\.(jpg|png)$/,
use: {
loader: 'url-loader',
},
}
然后在我的 App.js 文件中我有这个。
import React from "react";
import '../css/App.css'
import locationImg from '../public/location.png'
function App() {
console.log(locationImg)
return (
<div>
<h1>Contact Me</h1>
<img src={locationImg} />
</div>
);
}
export default App;
我的文件结构是这样的
-src
-Components
-App.js
-css
-public
-location.png
当我在 webpack 实时服务器上加载它时,图像不会加载。 为什么图片加载不出来?
尝试
const location= require(../public/location.png');
<img src={location} />
尝试将代码更改为
<img src={locationImg.default} />
或者
import * as locationImg from '../public/location.png'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.