如何从本地目录加载图像，并将其包含在reactjs img src标签中?
我有一个图像称为one.jpeg在相同的文件夹内作为我的组件，我尝试了<img src="one.jpeg" />和<img src={"one.jpeg"} />在我的renderfunction，但图像不显示。此外，我无法访问webpack配置文件，因为该项目是用官方的create-react-app命令行util创建的。
更新:如果我首先导入图像与导入img从'./one.jpeg'和使用它在img src={img}，但我有这么多的图像文件导入，因此，我想使用他们的形式，img src={'image_name.jpeg'}。
当前回答
最好的方法是先导入映像，然后再使用它。
import React, { Component } from 'react';
import logo from '../logo.svg';
export default class Header extends Component {
render() {
return (
<div className="row">
<div className="logo">
<img src={logo} width="100" height="50" />
</div>
</div>
);
}
}
其他回答
import React from "react";
import image from './img/one.jpg';
class Image extends React.Component{
render(){
return(
<img className='profile-image' alt='icon' src={image}/>
);
}
}
导出默认镜像
你可以创建一个名为实例images.js的文件，并引用其中所有的应用资源，然后将该组件导入到其他需要显示图像的组件中
第一步:从“。/img/icon.png”导入MyIcon
第二步:
<img
src={MyIcon}
style={{width:'100%', height:'100%'}}
/>
我想导入多个图像并将它们传递给不同的组件。结果证明，我只需要一次导入多个图像，并且可以通过传递道具在任何组件中使用它们。
import whiskey from './img/whiskey.jpg';
import hazel from './img/hazel.jpg';
import tubby from './img/tubby.jpg';
让我们创建一个对象。
dog = [
{ name: "Whiskey", src: whiskey },
// ...
]
然后显示图像
<img src={dog.src}></img>
import image from './img/one.jpg';
class Icons extends React.Component{
render(){
return(
<img className='profile-image' alt='icon' src={image}/>
);
}
}
export default Icons;
