ElmentUI走马灯的使用【获取后端数据进行图片的使用】解决图片无法显示的问题

一、 首先查看 走马灯样式 和 代码实现

轮播图做成了自定义组件

1-1 展示

1-2 组件代码

<template>
  <div class="banner">
    <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item  v-for="item in banners" :key="item.imageUrl">
      <!--注意： 只能放置 一行 图片引入代码-->
      <!--刚开始，有个试验的h3标签，导致只显示文字，图片一直不显示-->
      <img :src="item.imageUrl" class="banner_img">
    </el-carousel-item>
  </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'myBanner',
  components: {
  },
  data () {
    return {
      banners: []
    }
  },
  created () {
    this.getBanner()
  },
  methods: {
  	// axios网络请求已封装好，下文贴上 请求代码
    async getBanner () {
      try {
      // main.js 引入http模块时 在vue原型链上添加的属性$http
        const { data: res } = await this.$http.getBanner()

        if (res.code !== 200) {
          return this.message.error('数据请求失败')
        }
        // console.log(res);
        this.banners = res.banners;
      } catch (error) {
        console.log(error);
      }
    }
  }
}
</script>


<style>
  .banner {
    margin: 50px 0 30px 0;
  }

  .el-carousel__item .banner_img {
    display: inline-block;
    width: 600px;
    height: 200px;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

二、 完成封装的axios请求

2-1 http.js

import api from './instance'
export getBanner = () => { return api.get('/banner', {}) }

2-2 instance.js

import axios from 'axios'
import { Message } from 'element-ui'

const instance = axios.create({
        time: 1000 * 60,
        /* 在做登录认证的时候，会出现请求未
        登录的情况，查看请求头的时候发现
        并没有把登录时的cookie设置到第
        二次的请求头里面。查看资料才知
        道跨域请求要想带上cookie，必须要
        在{withCredentials: true} */
        withCredentials: true,
        baseURL: 'https://pl-fe.cn/cloud-music-api/'
    })
	    //跨域请求，允许保存cookie
	instance.defaults.withCredentials = true
	    //保存其状态码
	instance.defaults.validateStatus = function() {
    return true
}

//添加请求拦截器
instance.interceptors.request.use(function(config) {
        //发送请求之前做什么
        return config
    }, function(error) {
        //对请求错误做些什么
        Message.error({ message: '请求超时！' })
            //返回一个新的 Promise 实例，该实例的状态为rejected。
        return Promise.reject(error)
    })
    // 添加响应拦截器
instance.interceptors.response.use(function(response) {
    const status = response.status
        // 在发送请求之前做些什么
    if (status === 200) {
        //用于将现有对象转换为Promise对象
        return Promise.resolve(response)
    } else if (status === 301) {
        Message.error({ message: '请先登录！' })
            // router.replace({
            //   path: 'login'
            // })
        return false
    } else {
        return Promise.reject(response)
    }
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error)
})

const ajaxMethod = ['get', 'post']
const api = {}
ajaxMethod.forEach(method => {
    //数组取值的两种方式
    api[method] = function(url, data, config) {
        return new Promise(function(resolve, reject) {
            instance[method](url, data, config)
                .then(response => {
                    if (response.status === 200) {
                        resolve(response)
                    }
                })
                .catch(error => {
                    reject(error)
                })
        })
    }
})


export default api

三 、main.js

import * as getApi from './apis/http'
Vue.prototype.$http = getApi

四、 完整代码可查看此

1. 轮播图 原码
2. 访问此网址可直接查看样式
3. 目录结构导航