报了17个错是为什么。。。
来源：2-9 首页-商家列表（3）
hyperse
2019-10-26 01:12:54
代码如下，没有贴的就是直接引用的源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>首页1</title>
<script type="text/javascript">
(function(){
var docEl = document.documentElement;
function setRemUnit(){
//获取到rem的基准值
var rem = docEl.clientWidth / 10;
//动态设置html根元素的font-size
docEl.style.fontSize = rem + 'px';
}
setRemUnit();
//页面窗口变化时就重新调用该函数
window.addEventListener('resize',setRemUnit);
//窗口出现在当前屏幕时(有浏览器兼容性问题)
window.addEventListener('pageshow',function(e){
if(e.persisted){
setRemUnit();
}
});
})();
</script>
<link rel="stylesheet" type="text/css" href="../lib/reset.css"/>
<link rel="stylesheet" type="text/css" href="header/header.css" />
<link rel="stylesheet" type="text/css" href="searchBar/searchBar.css"/>
<link rel="stylesheet" type="text/css" href="category/category.css"/>
<link rel="stylesheet" type="text/css" href="contentList/contentList.css" />
</head>
<body>
<!-- 头部开始 -->
<div class="header">
<div class="search-bar">
<div class="bar-location">
<div class="location-icon"></div>
<div class="location-text">郑州市</div>
</div>
<div class="search-btn">
<p class="place-holder">鸡腿</p>
</div>
</div>
<img class="header-img" src="http://img.mukewang.com/climg/5d590b3f0001863804300245.jpg" />
</div>
<!-- 头部结束 -->
<!-- 类目开始 -->
<div class="category-content clearfix"></div>
<!-- 类目结束 -->
<!-- 商家列表开始 -->
<div class="list-content">
<h4 class="list-title">
<span class="title-line"></span>
<span>附近商家</span>
<span class="title-line"></span>
</h4>
<div class="list-wrap"></div>
</div>
<!-- 商家列表结束 -->
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="category/category.js"></script>
<script type="text/javascript" src="contentList/contentList.js"></script>
</body>
</html>contentList.js
(function(){
//商家详情模板字符串
var itemTmpl = '<div class="r-item-content">'+
'<img class="item-img" src=$pic_url/>' +
'$brand'+
'<div class="item-info-content">'+
'<p class="item-title">$name</p>'+
'<div class="item-desc">'+
'<div class="item-score">$wm_poi_score</div>'+
'<div class="item-count">月售$monthNmu</div>'+
'<div class="item-distance"> $distance</div>'+
'<div class="item-time">$mt_delivery_time |</div>'+
'</div>'+
'<div class="item-price">'+
'<div class="item-pre-price">$min_price_tip</div>'+
'</div>'
'<div class="item-others">'+
'$others'+
'</div>'+
'</div>'+
'</div>';
/* 获取商家列表数据
param */
function getList(){
$.get('../json/homelist.json',function(data){
console.log(data);
var list = data.data.poilist || [];
initContentList(list);
});
}
/* 渲染列表数据
param */
function initContentList(list){
list.forEach(function(item,index){
//将占位符替换成数据
var str = itemTmpl
.replace('$pic_url',item.pic_url)
.replace('$name',item.name)
.replace('$distance',item.distance)
.replace('$min_price_tip',item.min_price_tip);
$('.list-wrap').append($(str));
})
}
function init(){
getList();
}
init();
})();contentList.css
.list-content{
overflow: hidden;
padding-bottom: 1.333333rem;
}
.list-content .list-title{
text-align: center;
font-size: 0.426666rem;
margin-top: 0.373333rem;
margin-bottom: 0.133333rem;
}
.list-content .title-line{
display: inline-block;
border-bottom: 0.026666rem solid #949494;
height: 0.026666rem;
width: 0.8rem;
margin-left: 0.106666rem;
margin-right: 0.106666rem;
margin-bottom: 0.106666rem;
}
.r-item-content{
display: flex;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
margin-left: 0.266666rem;
margin-right: 0.266666rem;
color: #656565;
}
.r-item-content .item-img{
width: 2.293333rem;
height: 1.733333rem;
border: 0.026666rem solid #e4e4e4;
}
.r-item-content .item-info-content{
flex: 1;
margin-left: 0.186666rem;
overflow: hidden;
}
.r-item-content .brand{
position: absolute;
left: 0.026666rem;
top: 0.426666rem;
font-size: 0.32rem;
padding:0.053333rem ;
color: #FFFFFF;
}写回答
1回答
-
同学你好， 这些错误都表示找不到对应的图片。 通过检查元素可以发现，图片地址的后面多了一个斜杠，导致格式不正确，所以无法获取到图片
建议修改： 在设置模板字符串的时候， $pic_url和斜杠/之间要有一个空格分开
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0
相似问题