Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >React基础语法03-引入本地图片和服务器图片的方法

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

作者头像
王小婷
发布于 2025-05-19 06:19:05
发布于 2025-05-19 06:19:05
9000
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行
在组件里面引入本地图片的两种办法

方法一:

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

方法二:

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

Home.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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;
5640239-3bc7ce07185bbe2e.png
5640239-3bc7ce07185bbe2e.png
引入远程图片

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<img  src="http://www.intmote.com/star.png"/>

图片显示:

5640239-73434c49863578b7.png
5640239-73434c49863578b7.png
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-11-07,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
从零开始学习React-目录结构,创建组件页面(二)
1:打开编辑器,导入上一节的创建的项目,开始查看目录结构,manifest.json指定了开始页面index.html,一切的开始都从这里开始。
王小婷
2019/11/05
2.3K0
React基础语法01-双向数据绑定
把model里面的值赋给input,即把this.state里面的username值给了input,当页面加载的时候,model层就能改变视图view。 model
王小婷
2019/11/10
8150
React基础语法01-双向数据绑定
React基础语法06-事件对象的应用
老规矩,先看完官方文档,记录学习笔记: 教程:https://www.runoob.com/react/react-tutorial.html 文档:http://caibaojian.com/react/
王小婷
2019/11/10
6000
React基础语法05-改变this指向的3种方法
使用this指向当前组件的三种方法:分别是在模板里,在构造函数里,在构造函数里改变,推荐第三种,箭头函数。
王小婷
2019/11/10
5400
React基础语法02-onKeyUp键盘事件
3:继续实现 按回车键的时候,拿到值,首先监听KeyUp或者KeyDown事件,进行判断,当keyCode==13的时候,表示键盘按下,获取值。
王小婷
2019/11/10
3K0
React基础语法02-onKeyUp键盘事件
基于antd实现一个轮播图
关于antd的使用这里就不多说了,前面已经写过了,从零开始学习React-引入Ant Design 组件(八):https://www.jianshu.com/p/e7e905d89673,现在为了对组件的熟悉,来根据文档写一个常见的轮播图吧。
王小婷
2019/12/11
2.6K0
React基础语法04-循环数组渲染数据的方法
首先在this.state里面定义数组list: ['111', '222', '3333'], 写方法过滤,map循环遍历更改数组,返回一个li,把value放进去。
王小婷
2019/11/10
3.2K0
「React 手册 」从创建第一个 React 组件开始学起
大家好,在本系列的前三篇文章里,我们一起学习了在 React 中经常会用到的 ES6 新特性,以及 REACT 16+ 版本的一些新特性 和 团队 成员在 Winwow 和 MAC 环境下混合开发时需要注意的一些问题,从本篇文章起,我们将正式开始从最基础的内容开始学习React,今天我们将从创建第一个 React 组件开始学起。
前端达人
2019/12/24
2.6K0
「React 手册 」从创建第一个 React 组件开始学起
测开技能--Web开发 React 学习(二)环境搭建
开发环境的搭建,才是学习的第一步,那么我们看看,应该怎么搭建Recat的环境。那么跟着下面的教程,一步步来吧。
雷子
2021/03/15
3270
测开技能--Web开发 React 学习(二)环境搭建
react 学习:react 生命周期
一、图示 二、编写电子时钟 1 新建DigitalClock.js import React from 'react' /** * */ class DigitalClock extends R
爱明依
2019/04/22
4890
react 学习:react 生命周期
react学习:React状态
实现一个点赞按钮。点击数字增加 一:建立LikeButton.js  import React from 'react' class LikeButton extends React.Component{ constructor(props){ super(props) this.state={ likes:0 } // this.increaseLikes=this.increaseLikes.bind
爱明依
2019/04/22
8090
react学习:React状态
React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)
本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04 2、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)---2018.04.08 3、React多页面应用3(webpack4 多页面实现)---2018.04.09 4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018
前端人人
2018/04/11
1.4K0
React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)
react 学习:React属性 数组遍历、css引入
一:index.js 里直接引入css。 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; // import Welcome from './Welcome'; import * as serviceWorker from './serviceWorker'; import 'bootstrap/dist/css/bootstrap.
爱明依
2019/04/22
1.2K0
react 学习:React属性 数组遍历、css引入
「React 基础」关于组件属性(props)与状态(state)的入门介绍
大家好,在上一篇文章里,我们一起学习了如何创建第一个 React 组件,我相信通过上一篇文章的学习我们已经基本熟悉了什么是 React 组件,但是还有更多关于组件的内容值得我们去深入学习。本篇文章,我将和大家一起复习下如何使用组件的属性(props)与状态(state)。
前端达人
2019/12/26
1.6K0
「React 基础」关于组件属性(props)与状态(state)的入门介绍
React基础语法08-点击按钮,获取input框的值(通过ref来获取)
使用setState来改变username的值,让username的值等于val,即表单输入的值就赋给了userusername。
王小婷
2019/11/10
5.5K0
React技巧之导入并使用Image
原文链接:https://bobbyhadz.com/blog/react-import-image[1]
chuckQu
2022/08/19
1.8K0
React技巧之导入并使用Image
React 安装
实例中我们引入了三个库: react.development.min.js 、react-dom.development.min.js 和 babel.min.js:
陈不成i
2021/07/29
6160
「React 手册 」如何创建函数组件?
大家好,在前面的几篇相关文章里,我们一起学习了如何使用类的方式声明组件,以及如何属性传值和处理本地数据状态,本篇文章我们一起学习如何使用函数的方式进行声明组件。
前端达人
2019/12/30
3.1K0
「React 手册 」如何创建函数组件?
在 hexo 中无痛使用本地图片
1 起因 在 hexo 中使用本地图片是件非常让人纠结的事情,在 markdown 里的图片地址似乎永远无法和最后生成的网页保持一致。 这些问题使得我一度不愿意使用本地图片而选择用图床,但被移动运营商无耻的横条广告逼得打算上 https,图床只支持 http 就成了问题。 hexo 下插入图片现在大概有几个方案 1.1 放在根目录 早期大部分的方案是把图片放在 source/img 下,然后在 markdown 里写 ![img](/source/img/img.png) 。显然这样在本地的编辑器里完全不能
用户1148881
2018/01/15
2.8K0
React基础语法07-点击按钮,获取input框的值(通过事件对象获取)
在this.state里面定义一个空的username:'',并且把把表单输入的值赋值给username。
王小婷
2019/11/10
5.8K0
推荐阅读
相关推荐
从零开始学习React-目录结构,创建组件页面(二)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档