为什么图像不会出现在 vuejs 项目中

Question

在我的项目中，我使用 Vue.js+es6+webpack。

我在data.json中定义了img地址

 "seller": {
 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg",
  }

在 App.vue 中

 <v-header :seller="seller"></v-header>
 .......
 <script type="text/ecmascript-6">
 import header from './components/header/header.vue'
 export default {
  data () {
    return {
    seller: {}
  }
},
created () {
this.$http.get('/api/seller').then(response => {
// get body data
  this.seller = response.body
  console.log(this.seller)//get seller content from data.json successfully
}, response => {
// error callback
})
},
components: {
 'v-header': header
 }
}
</script>

header.vue 内容为：

 <div class="avatar">
      <img width="64" height="64" :src="seller.avatar">//works fail
 </div>

很不幸，图像没有出现。 当我选择另一种方式时：

<div class="avatar">
      <img width="64" height="64" src="http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg">//works OK
 </div>

完整的 header.vue 内容是

<template>
<div class="header">
  <div class="content-wrapper">
    <div class="avatar">
      <!--<img width="64" height="64" :src="seller.avatar">-->
      <img width="64" height="64" src="http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg">
    </div>
  </div>
  <div class="bulletin-wrapper"></div>
</div>
</template>

<script type="text/ecmascript-6">
 export default {
   props: {
     seller: {
       type: Object
     }
   }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
</style>

console.log(this.seller)的内容

data:{name: "JOHN）", description: "stack", deliveryTime: 38, score: 4.2, serviceScore: 4.1,…}
 avatar:"http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256
 px.jpg"
bulletin:"one"
deliveryPrice:4
deliveryTime:38
error:0

在 webpack.dev.con.js 中

const appData = require('../data.json') 
const seller = appData.seller
... 
devServer: { 
before (app) {
app.get('/api/seller',(req,res) => {
res.json({
 errno: 0,
 data: seller
}) // return json
}),

它工作正常。好像没什么问题，谁能帮帮我？

Answer 1

你的 json 似乎也坏了，看起来 root 属性是seller，所以分配应该是：

this.seller = response.body.data;