search

tangly1024 / NotionNext

使用 NextJS + Notion API 实现的，支持多种部署方案的静态博客，无需服务器、零门槛搭建网站，为Notion和所有创作者设计。 (A static blog built with NextJS and Notion API, supporting multiple deployment options. No server required, zero threshold to set up a website. Designed for Notion and all creators.)
https://tangly1024.com
MIT License
7.76k stars 10.69k forks source link

[自定义图床] 网站不显示图床图片 #1080

Closed nicemist closed 8 months ago

nicemist commented 1 year ago

图床图片显示错误 在notion中编辑笔记时，插入了vika图床的照片，在notion中可以正常显示照片，在网站中显示不出来 网站地址：https://www.nicemist.xyz/article/zwww

复现步骤 在notion在新增笔记，添加图片地址：https://s1.vika.cn/space/2023/05/08/1e1f9a11de774cc7a76d14a5c69fe49c 在网站中查看新增的笔记图片，显示失败

期望的正常结果 网站可以正常显示图片

截图 1

2

环境

补充说明 已经在next.config.js中添加了图片的域名 domains: [ 'gravatar.com', 'www.notion.so', 'avatars.githubusercontent.com', 'images.unsplash.com', 'source.unsplash.com', 'p1.qhimg.com', 'webmention.io', 's1.vika.cn' ]

tangly1024 commented 1 year ago

在我访问 https://www.nicemist.xyz/article/zwww 时，网站的图片似乎已经正常显示了：

image

https://cdn.staticaly.com/gh/nicemist/blogpicgo@master/img/202305281944728.jpeg

nicemist commented 1 year ago

在我访问 https://www.nicemist.xyz/article/zwww 时，网站的图片似乎已经正常显示了：

image

https://cdn.staticaly.com/gh/nicemist/blogpicgo@master/img/202305281944728.jpeg

我换了github的图床，你可以用图片的地址：https://s1.vika.cn/space/2023/05/08/1e1f9a11de774cc7a76d14a5c69fe49c ，放到notion网站里面，就可以复现了

tangly1024 commented 1 year ago

图床的防盗链功能检查一下，我在本地创建的页面中引入该图片显示403无权访问。

这张图片似乎只能在 https://s1.vika.cn 的域名下才能被加载

我的测试结果

image

chz8bit commented 1 year ago

我这边同样遇到了自定义图床的问题，Nobelium版本的会在前面加上notion域名进行解析？所以可以正常显示，比如第一张图。 image

这是使用作者NotionNext的，他会直接解析获得原图床的链接。可能是notion有一些骚操作hh，或许可以采取Nobelium的做法，这样可以避免自定义图床的问题 image

我刚刚又尝试了notion图床的图片，解析出来和Nobelium版本的相同。notion官网的图床才用的是aws的，是对于图床解析的代码有做修改吗。 image

并且使用了NotionNext的Nobelium主题进行尝试，发现与主题并无关联（虽然肯定和样式无关了） image

chz8bit commented 1 year ago

又进行了一次尝试，单独建了一个本地html，可以正常显示。神奇，再考虑考虑是什么问题。 image

<img style="object-fit:cover" src="https://img2023.cnblogs.com/blog/1663849/202307/1663849-20230711111727487-720082085.png" alt="notion image" loading="lazy" decoding="async" class="medium-zoom-image">
chz8bit commented 1 year ago

啊哈，我后面又看了看请求头，以及mapImage.js，发现有个图片映射对图床做了区分。或许是这个问题。

github: https://github.com/chz8bit/NotionNext

// 
// 可以访问的请求头 status 200
//  对应的网址  https://www.chz8bit.top/2023-07-11
:authority:  www.notion.so
:method:  GET
:path:  /image/https%3A%2F%2Fimg2023.cnblogs.com%2Fblog%2F1663849%2F202307%2F1663849-20230711111727487-720082085.png?table=block&id=05d66abe-edfe-409b-a8b5-2a4e3f783526&cache=v2
:scheme:  https
// 无法访问的请求头 status 403
//  对应的网址  https://notion-next-ruddy-mu.vercel.app/article/2023-07-11 
:authority:  img2023.cnblogs.com
:method:  GET
:path:  /blog/1663849/202307/1663849-20230711111727487-720082085.png
:scheme:  https

不知道别的图床是怎么做的，cnblog的图床是失败了。我也在想next.config.js的domain里添加了域名，但也没用。

images: {
    // 图片压缩
    formats: ['image/avif', 'image/webp'],
    // 允许next/image加载的图片 域名
    domains: [
      'gravatar.com',
      'www.notion.so',
      'avatars.githubusercontent.com',
      'images.unsplash.com',
      'source.unsplash.com',
      'p1.qhimg.com',
      'webmention.io',
      'img2023.cnblogs.com',
      'cnblogs.com'
    ]
  },
LLeavesG commented 1 year ago

啊哈，我后面又看了看请求头，以及mapImage.js，发现有个图片映射对图床做了区分。或许是这个问题。

github: https://github.com/chz8bit/NotionNext

// 
// 可以访问的请求头 status 200
//  对应的网址  https://www.chz8bit.top/2023-07-11
:authority:  www.notion.so
:method:  GET
:path:  /image/https%3A%2F%2Fimg2023.cnblogs.com%2Fblog%2F1663849%2F202307%2F1663849-20230711111727487-720082085.png?table=block&id=05d66abe-edfe-409b-a8b5-2a4e3f783526&cache=v2
:scheme:  https
// 无法访问的请求头 status 403
//  对应的网址  https://notion-next-ruddy-mu.vercel.app/article/2023-07-11 
:authority:  img2023.cnblogs.com
:method:  GET
:path:  /blog/1663849/202307/1663849-20230711111727487-720082085.png
:scheme:  https

不知道别的图床是怎么做的，cnblog的图床是失败了。我也在想next.config.js的domain里添加了域名，但也没用。

images: {
    // 图片压缩
    formats: ['image/avif', 'image/webp'],
    // 允许next/image加载的图片 域名
    domains: [
      'gravatar.com',
      'www.notion.so',
      'avatars.githubusercontent.com',
      'images.unsplash.com',
      'source.unsplash.com',
      'p1.qhimg.com',
      'webmention.io',
      'img2023.cnblogs.com',
      'cnblogs.com'
    ]
  },

同样的问题，请问你有解决吗

chz8bit commented 1 year ago

@LLeavesG 并没有解决。我换回Nobelium版本的了，发现这个不管是什么图床都会在前面加上notion.so，这样就可以图片获取成功。可能也和生命周期有关，但我没精力去研究了 :>