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


当前回答

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

其他回答

实际上,我刚刚遇到了同样的问题,如果你把你的图像文件从。/public目录移动到。/src目录,你可以导入或要求,都将呈现。

我还在组件中测试了图像和src属性,它们都可以工作。

在我尝试使用。我得到了一个可用的错误,让我可以很容易地修复。

电脑很好心地给了我一条有用的错误信息。

首先用{}包装src

如果使用Webpack; 而不是: <img src={"./logo.jpeg"} /> . quot

你可能需要使用require:

<img src={\ require(' logo.jpeg')} />


另一种选择是首先导入图像:

从'./logo.jpeg'导入logo;//导入

还是……

Const logo = require('./logo.jpeg');//使用require

然后插上电源……

<img src={logo} />

我推荐这个选项,特别是在重用映像源的情况下。

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文件夹移动到公共文件夹。如果你有一张图片在public/images/logo.jpg,你可以这样显示这个图片:

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

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

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

我的回答基本上和Rubzen的非常相似。顺便说一句,我使用图像作为对象值。 有两个版本适合我:

{
"name": "Silver Card",
"logo": require('./golden-card.png'),

or

const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,

没有包装,但这也是不同的应用。

我也检查了“导入”解决方案,在少数情况下它是有效的(这并不奇怪,这是应用在React中的App.js模式中),但不是在我上面的情况下。