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也似乎坏了，并且根属性看起来是seller，所以分配应该是：

this.seller = response.body.data;

为什么图像未出现在Vue.js项目中

1 个答案: