zoukankan      html  css  js  c++  java
  • react 引入图片

    react 不支持img直接引入
    <img src="../../images/img.png" alt="" />

    第一种:使用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 (
                <div>
                    引入图片
                    <img src={img} alt=""/>
                </div>
            )
        }
    }

    第二种:使用require引入

    import React from 'react';
    
    export default class Demo1 extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
    
            }
        }
    
        render() {
            return (
                <div>
                    引入图片
                    <img src={require("../../images/img.png")} alt="" />
                </div>
            )
        }
    }
    

     如果是背景图

    <div style={{ background: `url(${require("../../images/img.png")})` }}></div>

     网络图片: 

    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 (
                <div>
                    引入图片
                    <img src={this.state.img} alt="" />
                </div>
            )
        }
    }


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

     

  • 相关阅读:
    聊聊Spark的分区、并行度 —— 前奏篇
    深入探讨HBASE
    分布式流平台Kafka
    GeoServer中使用SLD样式
    OpenLayer修改WFS中的要素
    leaflet加载GeoServer的WFS服务
    OL实现属性查询的功能
    OL3实现空间查询的代码示例
    WFS—GetFeature方法
    OpenLayer+Geoserver+postgis实现路径分析
  • 原文地址:https://www.cnblogs.com/chen-yi-yi/p/12845014.html
Copyright © 2011-2022 走看看