react 引入图片

react 不支持img直接引入

第一种:使用import  **  from ' ......' 引入

import React from 'react';
import img from '../../images/img.png'

export default class Demo1 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {

        }
    }

    render() {
        return (
            

                引入图片
                
            
        )
    }
}

第二种:使用require引入

import React from 'react';

export default class Demo1 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {

        }
    }

    render() {
        return (
            

                引入图片
                
            
        )
    }
}

　如果是背景图

　网络图片: 

import React from 'react';

export default class Demo1 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            img: "https://upload.jianshu.io/users/upload_avatars/13342447/38927c8e-f1ea-4b3f-a56a-440e304ce52b?imageMogr2/auto-orient/strip|imageView2/1/w/100/h/100/format/webp"
        }
    }

    render() {
        return (
            

                引入图片
                
            
        )
    }
}

　***  注意 使用img时候 需要些alt属性 如果不写会给出 警告  "img元素必须有alt属性，可以是有意义的文本，也可以是用于装饰图像的空字符串"