blob 伪图片地址 laravel + vue

简介: blob 伪图片地址 laravel + vue

我不想让用户知道图片的真实 URL,那么如何在响应中返回图片流,即返回的不是一个浏览器可直接下载的图片文件 URL,而是图片的字节流?

laravel

//Controller
//自行设置路由
 public function getImg()
    {
    //图片链接
        $fullPath = 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/175b22f0032803f8bdbd94590c8c6629.jpeg';
        return response()->stream(function () use ($fullPath) {
            echo file_get_contents($fullPath);
        }, 200, ['Content-Type' => 'image/jpeg']);
    }

vue

//js
export default {
  data() {
    return {
    imgUrl:''
    }
 },
  methods: {
   getImg() {
      axios({
        method: 'get',
        timeout: 50000,
        baseURL: process.env.BASE_URL,
        url: '', //填写自己的路径
        responseType: 'blob',
        params: {},
        headers: {
          'apply-secret': process.env.PROJECT_KEY
        },
      }).then(res => {
        let blob = new Blob([res.data], { type: 'image/jpeg' });
        const imageUrl = URL.createObjectURL(blob);
        this.imgUrl = imageUrl;
      })
    },
    }
     }
//html
  <el-image  :src="imgUrl" />

最终路径结果

32.png

相关文章
|
4天前
|
JavaScript
VUE里的find与filter使用与区别
VUE里的find与filter使用与区别
14 0
|
4天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
4天前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式
14 0
|
4天前
|
移动开发 JavaScript 应用服务中间件
vue打包部署问题
Vue项目`vue.config.js`中,`publicPath`设定为&quot;/h5/party/pc/&quot;,在线环境基于打包后的`dist`目录,而非Linux的`/root`。Nginx代理配置位于`/usr/local/nginx/nginx-1.13.7/conf`,包含两个相关配置图。
vue打包部署问题
|
4天前
|
JavaScript 前端开发
iconfont 图标在vue里的使用
iconfont 图标在vue里的使用
16 0
|
5天前
|
存储 JavaScript
Vue当前时间与接口返回时间的判断
Vue当前时间与接口返回时间的判断
14 0
|
5天前
|
JavaScript 前端开发
Vue生成Canvas二维码
Vue生成Canvas二维码
10 0
|
1天前
|
JavaScript
vue知识点
vue知识点
9 1
|
3天前
|
JavaScript
vue打印v-model 的值
vue打印v-model 的值
|
4天前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
5 0