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

Posted 2023-02-22

【中文标题】为啥图像不会出现在 vuejs 项目中

【英文标题】：Why image does not appear in vuejs project为什么图像不会出现在 vuejs 项目中

【发布时间】：2018-12-26 03:04:39

【问题描述】：

在我的项目中，我使用 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   :src="seller.avatar">//works fail
 </div>

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

<div class="avatar">
      <img   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   :src="seller.avatar">-->
      <img   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
),

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

【问题讨论】：

如果您可以显示完整的标题组件代码会有所帮助。

@Jared，看看我的更新

尝试在// error callback中记录一些内容

【参考方案1】：

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

this.seller = response.body.data;

【讨论】：

@stack 查看我的编辑。这可能是由于您的 json 文件的结构。我在想你的 json 应该是 "seller": "avatar": "http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg",

是的，我的 json 是 "seller": "avatar": "static.galileo.xiaojukeji.com/static/tms/…",

我在控制台中找到了所有对象，包括头像："static.galileo.xiaojukeji.com/static/tms/…"

我已经测试过 this.seller = response.body.seller;但在控制台出错：vue.esm.js?efeb:591 [Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性 'avatar'”

您能否更新您的问题以包含response.body 的回复？