如何从本地目录加载图像,并将其包含在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'}。


当前回答

正如一些人在评论中提到的,你可以把图片放在公共文件夹中。这在Create-React-App: https://create-react-app.dev/docs/using-the-public-folder/的文档中也有解释

其他回答

把你的图片放在公共文件夹中,或者在公共文件夹中创建一个子文件夹,把你的图片放在那里。 例如:

你把“complete -爬行。jpg”放在公共文件夹中,然后你可以访问它

src={'/completative-reptile.jpg'}

你把complete -爬行.jpg放在public/static/images,然后你可以访问它

src={'/static/images/completative-reptile.jpg'}

对于那些想要使用多个图像的人来说,一个一个地导入它们将是一个问题。解决方案是将images文件夹移动到公共文件夹。如果你有一张图片在public/images/logo.jpg,你可以这样显示这个图片:

function Header() {
  return (
    <div>
      <img src="images/logo.jpg" alt="logo"/>
    </div>
  );
}

是的,不需要在源代码中使用/public/。

进一步阅读:https://daveceddia.com/react-image-tag/。

const photo = require(`../../uploads/images/${obj.photo}`).default;
...
<img src={photo} alt="user_photo" />

为了让require方法工作,我必须添加".default",就像这样:

<img src={require('./path/to/image.svg').default} />

第一步:从“。/img/icon.png”导入MyIcon

第二步:

<img
    src={MyIcon}
    style={{width:'100%', height:'100%'}}
/>