如何在React组件中导入图像（.svg，.png）

我正尝试在我的某个反应组件中导入图像文件。我有项目设置与网络包如何在React组件中导入图像（.svg，.png）

这里是我的组件

import Diamond from '../../assets/linux_logo.jpg'; 

export class ItemCols extends Component { 
    render(){ 
     return (
      <div> 
       <section className="one-fourth" id="html"> 
        <img src={Diamond} /> 
       </section> 
      </div> 
     ) 
    } 
}

这里是我的项目结构的代码。

我安装我的webpack.config.js文件以下列方式

{ 测试：/.(jpg|png|svg)$/，装载机：“URL装载机”，选项：{ 上限：25000， }， }，{ 测试：/.(jpg|png|svg)$/，装载机： '文件加载器'，选项：{ 名称： '[path] [name]。[hash]。[ext]'， }， }，

PS。我可以从任何其他远程源获取图像，但不能保存本地保存的图像。 JavaScript控制台也不会给我任何错误。请任何帮助。我很新的反应，无法找到我做错了什么。

来源

2017-05-06 Shadid

Shadid尝试，你有没有尝试？ –

是的，我试过。再次在控制台没有错误，但我看不到图像 – Shadid

您应该做一个webpack生成并检查图像的存储位置。在img src中使用该路径。 – vijayst

使用

import mainLogo from'./logoWhite.png'; 
 

 
//then in the render function of Jsx insert the mainLogo variable 
 

 
class NavBar extends Component { 
 
    render() { 
 
    return (
 
     <nav className="nav" style={nbStyle}> 
 
     <div className="container"> 
 
      //right below here 
 
      <img src={mainLogo} style={nbStyle.logo} alt="fireSpot"/> 
 
     </div> 
 
     </nav> 
 
    ); 
 
    } 
 
}

来源

2017-07-29 09:50:45

如果我想导入10个图像会发生什么？ –

@LeoGasparrini - 我不确定我明白你在问什么 - 只要你在导入时给他们一个独特的名字，你应该可以导入任意多的数据，不是吗？ –

如何在React组件中导入图像（.svg，.png）

回答

相关问题