右侧列表图片不显示

来源:4-13 vue-cli3项目案例-右侧列表显示(3)

慕盖茨9549625

2020-08-19 12:02

<template>
<div name="show">
<ul>          
<li v-for="good in list" :key="good.id"> 
<img v-bind:src="good.img">              
<p>{{good.goodName}}</p>          
</li>      
</ul>  
</div>
</template>
<script>
export default {  
name:"show",    
data(){       
     var obj=this;
     this.$http.get("json/bijiben.json").then(function(res){            
     obj.list=res.data;
     })        
     return{            
     list:[]        
     }          
         }            
             }
     </script>
     <style>
     </style>

以上为Goodslist.vue

[{"goodName":"小米9pro 855plus 8+128(展示机)",
"img":"img/shouji/s1.jpg"    
},{        
"goodName":"小米9pro 855plus 8+128(展示机)",
"img":"img/bijiben/b2.jpg"    
},{        
"goodName":"小米9pro 855plus 8+128(展示机)", 
"img":"img/bijiben/b3.jpg"
},{
"goodName":"小米9pro 855plus 8+128(展示机)",
"img":"img/bijiben/b4.jpg"
},{
"goodName":"小米9pro 855plus 8+128(展示机)",
"img":"img/bijiben/b5.jpg"
},{        
"goodName":"小米9pro 855plus 8+128(展示机)",        
"img":"img/bijiben/b6.jpg"    
},{        
"goodName":"小米9pro 855plus 8+128(展示机)",
"img":"img/bijiben/b7.jpg"    
},{        
"goodName":"小米9pro 855plus 8+128(展示机)",        
"img":"img/bijiben/b8.jpg"    
},{        
"goodName":"小米9pro 855plus 8+128(展示机)",
"img":"img/bijiben/b9.jpg"    
},{        
"goodName":"小米9pro 855plus 8+128(展示机)",        
"img":"img/bijiben/b10.jpg"    
}]

以上为shouji.json

请详细说明,万分感谢


写回答 关注

1回答

  • BGround
    2020-10-10 16:07:28

    你代码是json/bijiben.json,确认下是否有这个json文件

vue-cli全集

手把手带你学习从项目创建到项目升级,完美契合企业需求

44773 学习 · 230 问题

查看课程

相似问题