The article directories
Problem description idea specific implementation front end back end
Problem description
If is request http://www.example.com/image1.png picture originally, now ask for pictures, https://www.petal.social/image/www.example.com/image1.png you will need to do an image proxy
(request pictures to our own when the server request, then our HTTP server request images, the result of the HTTP in the way back to the web site of the HTTPS)
Train of thought
First, add an API locally for the front-end request that returns the modified image URL
The specific implementation
The front end
Original version:
showImage(url) {
if (url.startsWith('http://')) {
if (url.includes('qpic.cn') || url.includes('gtimg.cn')) {
return url.replace('http://', 'https://')
} else {
return return 'https://demo.cloudimg.io/v7/' + url
}
} else {
return url
}
}
Image URL contains /, so in Flask is mistaken for routing calls, so you need to for the original URL with Base64 encryption
modify after:
import {Base64} from 'js-base64'
const BASE_URL = 'http://localhost:5000'
// const BASE_URL = 'https://www.petal.social'
showImage(url) {
if (url.startsWith('http://')) {
if (url.includes('qpic.cn') || url.includes('gtimg.cn')) {
return url.replace('http://', 'https://')
} else {
return BASE_URL + '/api/v1/image/' + Base64.encode(url)
}
} else {
return url
}
}
The back-end
from flask_restplus import Namespace, Resource
from flask import request, make_response
from maintenance import check_maintenance, not_under_maintenance
import requests
from flask import Response, stream_with_context
import base64
image_api = Namespace('image', description='image related public interface')
@image_api.route('/<image_url>')
@image_api.param('image_url', 'The original image url')
class Image(Resource):
@image_api.doc('get_image_url')
@not_under_maintenance
def get(self, image_url):
check_maintenance()
image_url = base64.b64decode(image_url)
res = requests.get(image_url, stream = True)
return Response(stream_with_context(res.iter_content(2048)), content_type = res.headers['content-type'])
Read More:
- Initialization failed for ‘https://start.spring.io‘ Please check URL, network and proxy settings.
- JavaScript to achieve image rotation effect
- Error:Unknown host ‘maven.aliyun.com‘. You may need to adjust the proxy settings in Gradle.
- Win10 desktop right click display settings MS- settings:display Or Ms- settings:personalization-background resolvent
- Proxy error:could not proxy request
- Google set proxy, ERR_PROXY_CONNECTION_FAILED
- Vscode cannot write user settings. Open user settings, clear errors or warnings, and then type again
- nvidia-settings: ERROR: nvidia-settings could not find the registry key file
- Exception in thread “main“ java.lang.ClassCastException: com.sun.proxy.$Proxy8 cannot be cast to XXX
- Writing to settings when appium of Xiaomi mobile phone and oppo mobile phone starts requires:android.permission.WRITE_ SECURE_ SETTINGS
- When configuring the proxy with Vue, the front-end requests the server-side error 504; the Vue console reports the error occurred while trying to proxy request
- Ueditor paste word image and upload image file automatically
- Ant Design upload listtype = “picture card” realizes multi image upload and click preview image encapsulation
- VTK cultivation 26: basic operation of image_ Three dimensional image slice extraction
- [docker] error in deleting image: image is referenced in multiple repositories
- IDEA报Unable to save settings: Failed to save settings. Please restart IntelliJ IDEA
- objs/addon/ngx_http_proxy_connect_module-master/ngx_http_proxy_connect_module.o] Error 1
- ImageIO.read () unsupported image type when reading picture_ exception Unsupported Image Type
- Wechat applet background image error
- Nginx reverse proxy MySQL