React中添加图片

在html文件中，引入普通图片只需要这样

<img src="../assets/agv/IMG_20180922_091703.jpg" alt="logo"/>

 但是在React中，这种方式是不允许的，会报错儿。

在React中应该怎样添加图片呢？本文总结了三种方式

1.通过import引入:推荐使用这种方式

import pic1 from '../assets/agv/IMG_20180922_091703.jpg';

然后在img标签中直接引入这个变量就可以

<img src={pic1} alt="logo" />

2. 做为组件导入：这种方式仅对SVG图片生效

import { ReactComponent as NewLogo } from './assets/svg/ig_NothingToShow.svg';

 直接做为组件来使用：

  render() {
    return (
      <Layout style={{width:"100%", height:"100%"}}>
      <Header className="header">
        <div className="logo" >
          <NewLogo /> 
          {/* <PandaIcon /> */}
        </div>
  ....................
  }
  export default withRouter(App);

3.ant-design中使用自定义SVG：

参考文章：https://www.w3xue.com/exp/article/20189/848.html

(1).定义SVG组件：CustomizeSvg.js

import React from 'react';
// import { Icon } from 'antd';
import Icon from '@ant-design/icons';

const HeartSvg = () => (
  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
    <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
  </svg>
);

const PandaSvg = () => (
  <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
  .....................................
  </svg>
);


const ShunjiSmart = () => (
  <svg width="95" height="60" xmlns="http://www.w3.org/2000/svg"       xmlnsXlink="http://www.w3.org/1999/xlink">
...........................
</svg>
);

const ChrysanthemumSvg = () => (
<svg t="1583919046055" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="628" 
.......................................
</svg>
);

(2).使用ant-design的Icon 自定义图标组件：

export const HeartIcon = props => (
  <Icon component={HeartSvg} {...props} />
);

export const PandaIcon = props => (
  <Icon component={PandaSvg} {...props} />
);

export const ChrysanthemumIcon = props => (
  <Icon component={ChrysanthemumSvg} {...props} />
);

export const ShunjiSmartIcon = props => (
  <Icon component={ShunjiSmart} {...props} />
);

(3).使用自定义图标组件：

import {HeartIcon,ChrysanthemumIcon, PandaIcon, ShunjiSmartIcon} from './CustomizeSvg';
..........................
  render() {
    return (
      <Layout style={{width:"100%", height:"100%"}}>
      <Header className="header">
        <div className="logo" >
          <ShunjiSmartIcon />
          {/* <PandaIcon /> */}
        </div>
        <Menu>
   ............................
   }