json - 在 VueJs 中显示图像和描述

问题描述

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

描述：Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是行业的标准虚拟文本，当时一位不知名的印刷商采用了一种类型的厨房并将其加扰以制作一本类型样本书。它不仅经历了五个世纪，而且经历了电子排版的飞跃，基本保持不变。它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行起来，最近还随着 Aldus PageMaker 等桌面出版软件（包括 Lorem Ipsum 的版本）而普及。

图像：某事.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>

标签： jsonvue.js

json - 在 VueJs 中显示图像和描述

问题描述

解决方案

推荐阅读