前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React基础语法03-引入本地图片和服务器图片的方法

React基础语法03-引入本地图片和服务器图片的方法

作者头像
王小婷
发布2019-11-10 23:47:42
1.4K0
发布2019-11-10 23:47:42
举报
文章被收录于专栏:编程微刊编程微刊

在组件里面引入本地图片的两种办法

方法一:

代码语言:javascript
复制
import photo from '../asset/images/photo.jpg';
//引入本地图片
<img src={photo} className="App-logo" alt="photo" />

方法二:

代码语言:javascript
复制
{/* es5的写法 */}
<img src={require('../asset/images/photo.jpg')}  alt="logo" />

Home.js

代码语言:javascript
复制
import React, { Component } from 'react';
import photo from '../asset/images/photo.jpg';
import '../asset/css/index.css'
class Home extends Component {
    constructor(){
        super();
        //react定义数据
        this.state={
            name:'我是一个组件页面哦',
            title:'我是一个title',
            color:'test',
            style:{
                color:'blue',
                fontSize:'80px'
                
            }
        }
    }
    render() {
        return (
        <div> 
        <img src={photo} className="App-logo" alt="photo" />
        {/* es5的写法 */}
        <img src={require('../asset/images/photo.jpg')}  alt="logo" />

        </div>
        )
    }
}
export default Home;

引入远程图片

当引入服务器上的图片的时候,就是最基本的写法

代码语言:javascript
复制
<img  src="http://www.intmote.com/star.png"/>

图片显示:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 在组件里面引入本地图片的两种办法
  • 引入远程图片
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档