React(4) --引入图片及循环数据
引入图片的方法
1.引入本地图片
方法1:
import logo from '../assets/images/1.jpg';
<img src={logo} />
方法2:
<img src={require('../assets/images/1.jpg')} />
2.引入远程图片
<img src="https://www.baidu.com/img/xinshouye_353af22a7f305e1fb6cfa259394dea9b.png" />
循环数据的方法
constructor(props){
super(props);
this.state={
msg:'新闻',
list:['','',''], list2:[<h2 key='1'>我是一个h2</h2>,<h2 key='2'>我是一个h2</h2>], list3:[ {title:"新闻11111111"},
{title:"新闻22222"},
{title:"新闻33333333"},
{title:"新闻444444444"}
]
}
}
方法1:
render(){ let listResult=this.state.list.map(function(value,key){ return <li key={key}>{value}</li> //循环数据要加key
}) return(
<div className="news">
<ul>
{listResult}
</ul>
</div>
)
}
方法2:
return(
<div className="news"> {this.state.list2} </div>
)
方法3:
return(
<div className="news"> <ul> { this.state.list3.map(function(value,key){ return (<li key={key}>{value.title}</li>); })
}
</ul> </div>
)
React(4) --引入图片及循环数据的更多相关文章
- react中引入图片路劲正确但是页面上不显示或者打包后不能正常显示的问题
一.react中图片引入方式 以前我们用img引入图片只需要如下即可,在react中这样写会报错: <img src="../assets/zzsc1.png" /> ...
- react里面引入图片
引入图片确实走了很多的坑,开始的认知里,所有静态页面都需要放在public里面能执行,代码是这样的 css .back{ background-image: url('/images/homeBack ...
- react引入图片不显示问题
在react 中引入图片的方式和正常不同,,很容易引入不显示 引入本地图片 1.(采用组件式引入方法) import Logo from "图片路径" <img src={L ...
- 如何在react&webpack中引入图片?
在react&webpack项目中需要引入图片,但是webpack使用的模块化的思想,如果不进行任何配置,而直接在jsx或者是css中使用相对路径来使用就会出现问题,在webpack中提供了u ...
- vue-cli3中引入图片的几种方式和注意事项
如果你是在数据中引入图片,他是从项目中引入的应该按第一种方式引入 如果不是在数据中引入图片,按第二种方式引入
- vue中动态引入图片为什么要是require, 你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
- css考核点整理(八)-在什么情况下通过img引入图片,什么情况用背景图引入?背景属性有哪些
在什么情况下通过img引入图片,什么情况用背景图引入?背景属性有哪些
- JS可控制的图片自动循环播放查看效果
JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</t ...
- js 实现图片间隔循环轮播以及没有间隔的循环轮播
链接地址:http://blog.sina.com.cn/s/blog_75cf5f32010199dn.html 最近做了个图片循环轮播的功能.就是几张图片不断的循环滚动显示. 感觉这个方法不错所以 ...
随机推荐
- 034:DTL常用过滤器(3)
default过滤器: 如果值被评估为 False .比如 [] , "" , None , {} 等这些在 if 判断中为 False 的值,都会使用 default 过滤器提供 ...
- 阿里云E-HPC联合安世亚太、联科集团共建云超算生态
5月23日,2018云栖大会武汉峰会,阿里云高级技术专家刘峥和张维,对弹性计算最新上线的 serverless (无服务器化)计算技术Bazaar及基于该技术的容器服务产品 Severless Kub ...
- 整合ssm三大框架使用注解开发查询用户信息
整合ssm三大框架使用注解开发查询用户信息 一.基础知识准备之spring mvc工作原理 二.分析 第一步:发起请求到前端控制器(DispatcherServlet) 第二步:前端控制器请求Hand ...
- 牛客提高D3t2 点与面
分析 对于每一个点只要维护它前面/后面的一小一大组合的数量 对于这个可以维护两个树状数组 然后从前往后/从后往前分别扫一遍相乘即可 代码 #include<iostream> #inclu ...
- day30—使用Flexbox和CSS Grid实现高效布局实践
转行学开发,代码100天——2018-04-15 (今天是代码开发的第30天,但是代码记录有些滞后,尽快补上.日后要严格执行,避免学习进度和内容相对滞后.) 今天,记录“前端大全”里分享的一篇关于利用 ...
- php面向对象的重写与重载
重写: 就是当子类继承父类的一些方法后,子类又在其内部定义了相同的方法,则这个新定义的方法会覆盖继承而来的父类的方法,子类只能调用其内部定义的方法. 有以下几点要求: 1.当一个父类和子类有一个方法, ...
- 002-notepad++语言,编码,字体,背景色
一.基本操作 1.1.语言 Setting→Perferences→语言选择 1.2.默认编码 编码→使用UTF-8 无BOM编码 1.3.字体 “设置”-->“语言格式设置”-->“字体 ...
- PHP 调试 - Xdebug
PHP 调试指南.pdf PHP 程序员的调试技术 根据要调试的对象的不同,采取的方法也不一样: 调试 web 应用:对于 web 应用,可以在浏览器中安装插件,或者在 IDE 中设置,下面的设置二选 ...
- Vagrant 手册之多个虚拟机 multi-machine
原文地址 Vagrant 可以通过一个 Vagrantfile 定义并控制多个客户机.这就是所谓的"multi-machine"多虚拟机环境. 这些机器通常可以协同工作,或者互相关 ...
- python实现读取配置文件
实现代码如下: # 读取配置文件,取其值组成列表class ReadTxt: def read_txt(self,path): li_info = [] with open(path) as f: l ...