2-vue3调用豆瓣API加载图片403问题

最新推荐文章于 2024-06-20 21:48:49 发布

決别w

最新推荐文章于 2024-06-20 21:48:49 发布

阅读量597

点赞数 1

分类专栏： VUE学习文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/weixin_46526878/article/details/120182869

版权

VUE学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了一位开发者如何使用Vue和images.weserv.nl服务解决从豆瓣API获取图片时遇到的403问题，通过配置图片缓存与适应性调整，成功解决了图片加载问题。关键步骤包括使用weserv.nl服务代理和处理返回的JSON数据。

摘要由CSDN通过智能技术生成

vue调用豆瓣API加载图片403问题

问题背景：

建立的json-server来储存数据，用axios来请求数据，结果请求图片后出现403问题
在这里插入图片描述

在这里插入图片描述

过程:

后来几天看到了一位大佬的分享——侃叔，一试边成了

代码如下:

<template>
 <div class="Bottom">
     <div class="b_nav">
        <span class="popular">影院热映</span>
        <div class="more">查看更多<i class="iconfont icon-arrow-right"></i></div>
     </div>
    
    <div class="movies" v-for="(item, index) in state.imgs" :key="index">  
        <div class="row" >
            <img :src="item" >
            <span>{{state.imgList[index].title}}</span>
        </div>
    </div>
 </div>
</template>

<script>
import {getInfo} from '@/api/index.js'
import { onMounted, reactive, ref } from '@vue/runtime-core'
export default {
    name: 'Bottom',
    setup() {
        //_url:通过异步请求得到的图片链接，这个是我从豆瓣请求到的一个图片链接：
        let getImages = function(_url) {    
            if( _url !== undefined ){
                let _u = _url.substring(7); //_u:提取http://后面的部分
                return 'https://images.weserv.nl/?url=' + _u;
            }
        }
        let state = reactive({
            imgList: [],
            imgs: [],
        })
        onMounted(async () => {
            // let res = await axios.get('http://localhost:3000/posts?')
            let res = await getInfo();
            // console.log(res.data);
            // console.log(res.data[0].cover);
            state.imgList = JSON.parse(JSON.stringify(res.data))// 序列化后可以取值
            // console.log(state.imgList); 
            state.imgList.forEach((item) => {
                state.imgs.push(getImages(item.cover));
            })
            
        })
        return {
            state
        }
    },
}
</script>