在VueJs中展示图片和描述

Question

我正在创建一个使用VueJs和wagtail的博客网站。我在Json中获取页面和图像数据。我需要将数据显示为

描述: Lorem Ipsum只是印刷和排版行业的虚拟文本。自15世纪以来，Lorem Ipsum一直是业界的标准虚拟文本，当时一家不知名的印刷商拿出了一个排版，然后把它弄乱了，做成了一个排版样本簿。它不仅存活了五个世纪，还经历了电子排版的飞跃，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset sheets的发布而流行起来，最近又随着包括Lorem Ipsum版本的桌面出版软件Aldus PageMaker而流行起来。

img: something.jpg

描述: Lorem Ipsum只是印刷和排版行业的虚拟文本。自15世纪以来，Lorem Ipsum一直是业界的标准虚拟文本，当时一家不知名的印刷商拿出了一个排版，然后把它弄乱了，做成了一个排版样本簿。它不仅存活了五个世纪，还经历了电子排版的飞跃，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset sheets的发布而流行起来，最近又随着包括Lorem Ipsum版本的桌面出版软件Aldus PageMaker而流行起来。

img: something.jpg

我该怎么做呢？这是我的代码。在我的代码中，我不能正确显示

<template>
<div class="app">
  <div>
    <b-card-group deck v-for="item in results" :key="item.id">
      <b-card
        border-variant="primary"
      >
        <b-card-text>
          <div v-for="block in item.body" :key="block.id">
            <div v-if="block.type == 'heading'">
              <h2>{{block.value}}</h2>
            </div>
               <div v-for="image in images" :key="image.id">
                 <div v-if="block.type == 'image'">
                 <img :src="'http://127.0.0.1:8000' + image.meta.download_url" alt="">
               </div>
              <!-- <img :src="'http://127.0.0.1:8000/' + block.value"> -->
            </div>
             <div v-if="block.type == 'paragraph'">
              <h2 v-html="block.value">{{block.value}}</h2>
            </div>
          </div>
        </b-card-text>
      </b-card>
    </b-card-group>
  </div>
</div>
</template>

<script>
// @ is an alias to /src
import axios from 'axios'
export default {
  name: 'Home',
  data () {
    return {
      results: null,
      image_path: null,
      tags: null,
      title: null,
      images: null
    }
  },
  mounted () {
    axios.get('http://127.0.0.1:8000/api/v2/pages/?type=news.NewsPage&fields=intro,body,image_thumbnail')
      .then((response) => {
        this.results = response.data.items
      })
      .catch((error) => (
        console.log(error)
      ))
  },
  created () {
    axios.get('http://127.0.0.1:8000/api/v2/images/')
      .then((response) => {
        this.images = response.data.items
      })
      .catch((error) => (
        console.log(error)
      ))
  }
}
</script>

<style scoped>
.app{
  width: 80%;
  margin: 0 auto;
}
.card{
  border: 2px solid black;

}
  p{
    font-size: 16px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }
  h2{
    font-weight: 300;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 14px;
  }
</style>

Answer 1

我认为这段代码有两个问题：

1)您正在加载已创建并挂载的ajax数据。图像不链接到数据，

2)你还需要整理缩进，因为我认为你的div没有像你想的那样对齐。请注意，在图像中，您正在循环遍历从ajax加载的this.images属性。但是，图像不是来自您正在迭代的外部对象吗？或者，您是否打算在每次迭代博客项目时重复相同的图像集？