<p class="image"><img src="photo/{{img}}" /></p>為啥這行報錯了？求大神指點，代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>海報畫廊</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background-color:#fff;
color:#555;
font-family:'Avenir Next','Lantinghei SC';
font-size:14px;
-webkit-font-smoothing:antialiased;
}
.wrap{
width:100%;
height:600px;
position:absolute;
top:50%;
margin-top:-300px;
background-color:#333;
overflow:hidden;
-webkit-perspective:800px;
}
/*海報樣式*/
.photo{
width:280px;
height:320px;
position:absolute;
z-index:1;
box-shadow:0 0 1px rgba(0,0,0,0.1);
}
.photo .side{
width:100%;
height:100%;
background-color:#eee;
position:absolute;
top:0;
right:0;
padding:20px;
box-sizing:border-box;
}
.photo .side-front .image{
width:100%;
height:250px;
line-height:250px;
overflow:hidden;
}
.photo .side-front .image img{
width:100%;
}
.photo .side-front .caption{
text-align:center;
font-size:16px;
line-height:50px;
margin-top:-50px;
color:#666;
}
.photo .side-back .desc{
color:#666;
font-size:14px;
line-height:1.5em;
}
/*當前選中的海報樣式*/
.photo_center{
left:50%;
top:50%;
margin:-160px 0 0 -130px;
z-index:999;
}
/*負責翻轉(zhuǎn)*/
.photo-wrap{
position:absolute;
width:100%;
height:100%;
-webkit-transform-style:preserve-3d;
-webkit-transition:all 0.6s;
}
.photo-wrap .side-front{
-webkit-transform:rotateY(0deg);
}
.photo-wrap .side-back{
-webkit-transform:rotateY(180deg);
}
.photo-wrap .side{
-webkit-backface-visibility:hidden;
}
.photo_front .photo-wrap{
-webkit-transform:rotateY(0deg);;
}
.photo_back .photo-wrap{
-webkit-transform:rotateY(180deg);
}
</style>
</head>
<body onselectstart="return false;">
<!--2.改寫視圖為模板字符串-->
<div class="wrap" id="wrap">
<!--photo負責平移、旋轉(zhuǎn)-->
<div class="photo photo_center photo_front" onclick="turn(this)" id="photo_{{index}}">
<!--photo-wrap負責翻轉(zhuǎn)-->
<div class="photo-wrap">
<div class="side side-front">
<p class="image"><img src="photo/{{img}}" /></p>
<p class="caption">{{caption}}</p>
</div>
<div class="side side-back">
<p class="desc">{{desc}}</p>
<p>《麥兜我和我媽媽》是由新華展望傳媒有限公司出品的動畫電影，
影片由謝立文執(zhí)導(dǎo)，吳君如、黃磊、黃秋生等人配音。是麥兜系列的
第六部電影。影片講述了一個突如其來的意外打破了麥兜和麥太平靜
的母子生活，麥兜迎來了一段全新的人生旅程的故事。
該片于2014年10月1日在中國大陸上映。</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript">
//3.通用函數(shù)
function g(selector){
var method=selector.substr(0,1)=='.'? 'getElementsByClassName':'getElementById';
return document[method](selector.substr(1));
}
//4.輸出所有的海報
var data=data;
function addPhotos(){
var template=g('#wrap').innerHTML;
var html=[];
for( s in data){
var _html=template
.replace('{{index}}',s)
.replace('{{img}}',data[s].img)
.replace('{{caption}}',data[s].caption)
.replace('{{desc}}',data[s].desc);
html.push(_html);
}
g('#wrap').innerHTML=html.join('');
}
addPhotos();
//1.翻面控制
function turn(elem){
var cls=elem.className;
if(/photo_front/.test(cls)){
cls=cls.replace(/photo_front/,'photo_back');
}else{
cls=cls.replace(/photo_back/,'photo_front');
}
return elem.className=cls;
}
</script>
<body>
</html>
2020-03-10
把報錯信息貼出來，貼源碼沒用，源碼引用了其他的資源文件。