本地服务器vue和react调用在线图片403问题

 

本地服务器vue和react都有这个问题

 

原理是

其实是这个网址 :

https://images.weserv.nl/docs/format.html#adaptive-filter

images.weserv.nl是一种图像缓存和调整大小服务。我们的服务器调整您的图像大小，在全球范围内缓存并显示它。

 

<template>
  <b>显示在线图片</b>
  <div>
    <img  width="300" :src="imgsrc" alt="">
    <img  width="300"  :src="src" alt="403">
  </div>
</template>

<script setup lang="ts">
import { ref,onMounted} from 'vue'
function getImages(_url: any) {
  if (_url !== undefined) {
    let _u = _url.substring(8); // 得到https://后的内容 
    return 'https://images.weserv.nl/?url=' + _u;
  }
}
let src = "https://pic.cnblogs.com/avatar/626968/20141211154308.png"
let imgsrc = ref<string|undefined>('')
onMounted(() => {
  imgsrc.value = getImages(src);
})

</script>

 

参考网站

https://blog.csdn.net/weixin_34849131/article/details/119589238?spm=1001.2014.3001.5501