<img src> 和 background-image 区别


在网页加载的过程中,以css背景图存在的图片会等到结构加载完成(网页的内容全部显示以后)才开始加载,而html中的<img>标签是网页结构(内容)的一部分会在加载结构的过程中加载,换句话讲,网页会先加载<img>标签的内容,再加载背景图片,如果你用<img>引入了一个很大的图片,那么在这个图片下载完成之前,<img>之后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之后,才开始加载背景图片,不会影响你浏览网页内容。
<template> <el-table :data="tableData" style="width: 100%" stripe ref="multipleTable" @selection-change="handleSelectionChange" :header-cell-style="{background:'#eef1f6',color:'#606266'}"> <el-table-column prop="id" label="编号" sortable /> <el-table-column prop="img" label="图片url" sortable /> <el-table-column prop="img" label="缩略图"> <template v-slot="products"> <img :src="products.row.img" min-width="70" height="70"/> </template> </el-table-column> <el-table-column prop="image" label="图片" min-width="20%" > <!-- 图片的显示 --> <template #default="scope"> <!--<img :src="scope.row.img" min-width="70" height="70" />--> </template> </el-table-column> <el-table-column align="center" label="图片url"> <template v-slot="products"> <!--<img :src="require('../file/img/' + item)" v-for="item in list" :key="item" alt="">--> <el-image style="width: 100px; height: 100px" :src="products.row.img" ></el-image> <!--<img :src="require(''+products.row.img)" style=" width:100px; height:100px" />--> </template> </el-table-column> </el-table> </template> <script setup> import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue' let { proxy } = getCurrentInstance(); import router from '@/router' onMounted(()=>{ getTableData(); }); //获取表单信息 let tableData = ref([]); function getTableData() { proxy.$http.get('/ImgController/imgFind') .then(res => { tableData.value=res.data; console.log(res.data) }) .catch(err => { console.log(err) }); } </script> <style scoped> </style>修改以上代码,是他能够显示图片
05-25
<!DOCTYPE html> <html> <head> <style> .tabcontent { display: none; } .tabcontent img { width: 200px; height: 200px; object-fit: cover; margin: 10px; } .tab { overflow: hidden; margin: 10px 0; } .tab button { background-color: #f1f1f1; float: left; border: none; outline: none; cursor: pointer; padding: 10px 20px; transition: background-color 0.3s ease; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } </style> </head> <body> <div class="tab"> <button class="tablinks" onclick="openTab(event, 'page1')" id="defaultOpen">Page 1</button> <button class="tablinks" onclick="openTab(event, 'page2')">Page 2</button> </div> <div id="page1" class="tabcontent"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> <img src="image4.jpg"> <img src="image5.jpg"> </div> <div id="page2" class="tabcontent"> <img src="image6.jpg"> <img src="image7.jpg"> <img src="image8.jpg"> <img src="image9.jpg"> <img src="image10.jpg"> </div> <script> function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; } document.getElementById("defaultOpen").click(); </script> </body> </html>优化js代码
07-14
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值