上传到amazon s3的图片在浏览器不显示,而是下载

2024-06-18 11:08

本文主要是介绍上传到amazon s3的图片在浏览器不显示,而是下载,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

通过boto3把图片上传到s3上以后,图片不在浏览器显示,而是下载

问题解决很简单,重要的是解决思路

遇到问题一定要理智分析问题原因,找到根本原因,问题自然就解决了

1、先用curl 看一下这个图片的头是啥
说来惭愧,竟然不知道怎么拿到这个图片链接的header
在浏览器上输入链接,F12,勾选上Preserve log,然后访问此链接
在这里插入图片描述

这时在控制台就能看到请求了,然后把curl拿下了
在终端执行curl 命令

 curl 'http://xxxxxxxxxx.log' -H 'Connection: keep-alive' -H 'Pragma: no-cache' -H 'Cache-Control: no-cache' -H 'Upgrade-Insecure-Requests: 1' -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36' -H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3' -H 'Accept-Encoding: gzip, deflate' -H 'Accept-Language: zh-CN,zh;q=0.9,en;q=0.8' -H 'Cookie: csrftoken=9HTnAyzu7nDOukolc8u1ufoD9GJdV7e1DAI6KkFUmETYe3IMAjFfj996YdryBy0T' --compressed **-k -v >/dev/null**

添加 -k -v 参数
>/dev/null是把下载结果丢掉

可以看到返回结果

< HTTP/1.1 200 OK
< Server: nginx/1.12.2
< Date: Sat, 20 Jul 2019 02:03:18 GMT
< Content-Type: application/octet-stream
< Content-Length: 14617
< Connection: keep-alive
< Last-Modified: Fri, 19 Jul 2019 15:37:36 GMT
< ETag: “5d31e3c0-3919”
< Accept-Ranges: bytes
<
{ [data not shown]

重点就是Content-Type,Content-Type是octet-stream,浏览器就会执行下载

2、解决问题
上传图片的时候指定Content-Type为 text/plain image/jpeg image/png浏览器都会显示而不下载,
因为图片有不同的样式,为了方便就都把Content-Type统一为image/jpeg,浏览器是不会只根据Content-Type的值去处理的,只是作为参考,浏览器会识别出正确格式而正确显示。
只不过我们设置成image/jpeg更贴边。

3、处理老图片
安装aws客户端
参考 https://docs.aws.amazon.com/zh_cn/cli/latest/userguide/cli-chap-install.html#post-install-configure

pip install awscli --upgrade --user

配置基本信息

$aws configure

$ aws configure
AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE AWS
Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
Default region name [None]: us-west-2
Default output format [None]:json

执行命令把bucket下的所有内容变成image/jpeg格式

aws s3 cp s3://bucket_name/ s3://bucket_name/ --recursive  --include '*' --metadata-directive REPLACE --content-type='image/jpeg'

把以.jpg结尾的内容变成image/jpeg格式

aws s3 cp s3://bucket_name/ s3://bucket_name/ --recursive --exclude '*' --include '*.jpg' --metadata-directive REPLACE --content-type='image/jpeg'

这篇关于上传到amazon s3的图片在浏览器不显示,而是下载的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1071918

相关文章

SpringBoot UserAgentUtils获取用户浏览器的用法

《SpringBootUserAgentUtils获取用户浏览器的用法》UserAgentUtils是于处理用户代理(User-Agent)字符串的工具类,一般用于解析和处理浏览器、操作系统以及设备... 目录介绍效果图依赖封装客户端工具封装IP工具实体类获取设备信息入库介绍UserAgentUtils

Android使用ImageView.ScaleType实现图片的缩放与裁剪功能

《Android使用ImageView.ScaleType实现图片的缩放与裁剪功能》ImageView是最常用的控件之一,它用于展示各种类型的图片,为了能够根据需求调整图片的显示效果,Android提... 目录什么是 ImageView.ScaleType?FIT_XYFIT_STARTFIT_CENTE

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

C#实现将Excel表格转换为图片(JPG/ PNG)

《C#实现将Excel表格转换为图片(JPG/PNG)》Excel表格可能会因为不同设备或字体缺失等问题,导致格式错乱或数据显示异常,转换为图片后,能确保数据的排版等保持一致,下面我们看看如何使用C... 目录通过C# 转换Excel工作表到图片通过C# 转换指定单元格区域到图片知识扩展C# 将 Excel

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例