背景

自己搭建blog，使用腾讯cos 存放blog 图片。

文章为富文本，图片链接是直接保存在富文本img标签上的，想着以后腾讯cos桶到期之后，如何处理这些图片路径。

以后迁移图片之后，不用去修改富文本图片路径。

解决方案

1.图片迁移之后，每篇文章手动修改（不太科学）

2.监听img标签 error 事件（集成三方富文本编辑器，不太靠谱）

3.图片src自定义请求，使用ngnix转发请求，node处理（推荐）

注：这里使用的三种方式解决

原理

文章富文本中img标签 src 为相对路径 例如 /api/getfile?path=xxxx，当加载图片时静态资源会被nginx 拦截，该请求 /api/getfile?path=xxxx node会接收处理，先获取path 在拼上腾讯cos桶的地址，发送请求获取到图片，然后在返回给img标签展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGqDT68i-1653221670030)(…/…/…/api/getfile?path=blog%2F_static_1653215451336_mceclip0.png)]

具体操作

第一步：img 中的src 地址是接口地址，会被nginx拦截，服务转发到我的node 后台服务

第二步：node 处理请求 成功返回图片流

const _base_dir = '腾讯云cos桶地址';
export async function getFile(ctx, next){
    const { path } = ctx.request.query;
    if(!path) {
        ctx.body = RESPONSE_DATA.error;
        return;
    }
    try{
        const response = await fetch(_base_dir+encodeURIComponent(path));
        if (!response.ok) throw new Error(`unexpected response ${response.statusText}`);
        const streamPipeline = promisify(pipeline);
        ctx.status = 200;
        await streamPipeline(response.body, ctx.res );

    }catch(err){
        ctx.body = RESPONSE_DATA.error;
    }
}

 
腾讯云cos服务到期之后，迁移图片资源之后，只需要替换_base_dir 地址就好了