如何在 React 组件中导入图像(.svg、.png)

组件中导入图像

关注

发信

关注(28)粉丝(399)

如何在 React 组件中导入图像(.svg、.png)

本文介绍了如何在 React 组件中导入图像(.svg、.png)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在我的反应组件之一中导入图像文件.我用 web pack 设置了项目

这是我的组件代码

从'../../assets/linux_logo.jpg'导入钻石；导出类 ItemCols 扩展组件 {使成为(){返回 (<div><section className="四分之一" id="html"><img src={钻石}/></节>

)}}

这是我的项目结构.

我已经按照以下方式设置了我的 webpack.config.js 文件

{测试:/.(jpg|png|svg)$/,loader: 'url-loader',选项: {限制:25000，},},{测试:/.(jpg|png|svg)$/,加载器:'文件加载器'，选项: {name: '[path][name].[hash].[ext]',},},

附注.我可以从任何其他远程来源获取图像，但不能从本地保存的图像中获取.JavaScript 控制台也没有给我任何错误.请任何帮助.我对反应很陌生，无法找到我做错了什么.

解决方案

尝试使用

import mainLogo from'./logoWhite.png';//然后在Jsx的render函数中插入mainLogo变量类导航栏扩展组件{使成为() {返回 (<nav className="nav" style={nbStyle}><div className="容器">//就在下面<img src={mainLogo} style={nbStyle.logo} alt="fireSpot"/>

</nav>);}}

I am trying to import an image file in one of my react component. I have the project setup with web pack

Here's my code for the component

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>
        )
    }
}

Here's my project structure.

I have setup my webpack.config.js file in the following way

{
    test: /.(jpg|png|svg)$/,
    loader: 'url-loader',
    options: {
      limit: 25000,
    },
},
{
    test: /.(jpg|png|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[path][name].[hash].[ext]',
    },
},

PS. I can get image from any other remote source but not locally saved images. The JavaScript Console also doesn't give me any error. Please anything helps. I am quite new to react and unable to find what am I doing wrong.

解决方案

try using

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>
    );
  }
}

这篇关于如何在 React 组件中导入图像(.svg、.png)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-12 18:07