[Bug] 插件“哔哩哔哩”输出的图片是损坏的

[BiFangKNT]

📦 部署环境

Docker

📌 软件版本

lobehub/lobe-chat-database:1.15.26

💻 系统环境

Other Linux

🌐 浏览器

Chrome

🐛 问题描述

如图，输出的图片是损坏的

图片链接是这样的：https://gw.alipayobjects.com/zos/kitchen/QAvkgt30Ys/image_off_light.webp
相关配置文件在这个议题 #3864 中有贴出。

📷 复现步骤

如上所述

🚦 期望结果

图片不损坏且正常显示

📝 补充信息

No response

[lobehubbot]

👀 @BiFangKNT

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible.
Please make sure you have given us as much context as possible.
非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

[dosubot[bot]]

I found a similar open issue: [Bug] 第一条消息附带图片失败, which was last updated on September 05, 2024. This issue might be related to how the system handles image attachments in messages.

For the specific issue with the "哔哩哔哩" plugin, the plugin fetches images from external sources using the imageGenerationService.generateImage method. The error handling mechanisms in place for failed image fetches include:

1. Toggling Loading State: The loading state for the image is toggled using toggleDallEImageLoading both before and after attempting to fetch the image.
2. Error Logging: If an error occurs during the image fetch, the error is caught and stored in an errorArray.
3. Updating Plugin State: The plugin state is updated with the error information using updatePluginState.

Here is the relevant code snippet:

await pMap(items, async (params, index) => {
  toggleDallEImageLoading(messageId + params.prompt, true);
  let url = '';
  try {
    url = await imageGenerationService.generateImage(params);
  } catch (e) {
    toggleDallEImageLoading(messageId + params.prompt, false);
    errorArray[index] = e;

    await get().updatePluginState(messageId, { error: errorArray });
  }

  if (!url) return;

  await updateImageItem(messageId, (draft) => {
    draft[index].previewUrl = url;
  });

  toggleDallEImageLoading(messageId + params.prompt, false);
  const imageFile = await uploadService.getImageFileByUrlWithCORS(
    url,
    `${originPrompt || params.prompt}_${index}.png`,
  );

  const data = await useFileStore.getState().uploadWithProgress({
    file: imageFile,
    onStatusUpdate: () => {},
  });

  if (!data) return;

  await updateImageItem(messageId, (draft) => {
    draft[index].imageId = data.id;
    draft[index].previewUrl = undefined;
  });
});

This code handles the image fetching and error logging, which might help in diagnosing the issue with the damaged images ^[1].

Additionally, you might want to check the related configuration files mentioned in issue #3864 to ensure that all settings are correctly configured for image handling.

To continue talking to Dosu, mention @dosu.

[urzz]

Bilibili插件这个看起来是跨域限制，导致无法加载图片。。

[BiFangKNT]

图片的访问链接是bilbili的

所以您的意思是问题出在哪里？哔哩哔哩的图片被插件爬下来后，不是要先存到minio里，然后再从minio里读取吗？可是我minio对lobe设置了跨域，不应该读不了minio的图片吧？总不能是哔哩哔哩对minio跨域拦截吧？后者如何解决？

[arvinxx]

哔哩哔哩的图片被插件爬下来后

并不存在这一步

[BiFangKNT]

哔哩哔哩的图片被插件爬下来后

并不存在这一步

那这里的图片是怎么来的呢？

[urzz]

看bilibili的插件实现，是借助RSSHub来做的。

比如搜索视频的实现：
https://github.com/lobehub/chat-plugin-bilibili/blob/main/src/servers/fetchSearch.ts
RSSHub的搜索视频实现：
https://github.com/DIYgod/RSSHub/blob/master/lib/routes/bilibili/vsearch.ts

都不会爬取图片，展示的图片链接就是B站的原链接。。所以你是不是理解有误区0.0

[BiFangKNT]

看bilibili的插件实现，是借助RSSHub来做的。

比如搜索视频的实现： https://github.com/lobehub/chat-plugin-bilibili/blob/main/src/servers/fetchSearch.ts RSSHub的搜索视频实现： https://github.com/DIYgod/RSSHub/blob/master/lib/routes/bilibili/vsearch.ts

都不会爬取图片，展示的图片链接就是B站的原链接。。所以你是不是理解有误区0.0

我不懂啊，我猜的。如果是这样的话，图片无法正常显示是什么原因呢？

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

This Bilibili plug-in seems to have cross-domain restrictions, resulting in the inability to load images. .

[urzz]

我看了一下，主要原因是B站的图片链接有防盗链，会检查 referrer。RSSHub返回的信息中，img标签会带referrerpolicy="no-referrer"配置，避免请求的时候带 referrer 信息，导致加载图片失败。但是lobe的bilibili插件返回的图片，是没有带这个配置的。

所以图片无法显示，直接原因就是因为B站的防盗链功能拦截了，根本原因是因为回答中的 img 没有携带 no-referrer 配置

[BiFangKNT]

那lobe是不是可以修复这个实现？要不是我不了解项目结构，不清楚相关逻辑在哪里，我就尝试着实现了🤣

[urzz]

那lobe是不是可以修复这个实现？要不是我不了解项目结构，不清楚相关逻辑在哪里，我就尝试着实现了🤣

有两个方案，一个方案是用图片代理；还有一个是模型返回markdown的图片格式 ，渲染时插入 referrerpolicy="no-referrer"。感觉还是看lobe有没有计划支持图片代理？或者插件是否可以做这样的事儿 0.0
另外 markdown 也支持内嵌html，可以尝试让模型生成的图片结果用内嵌html格式，不过感觉这种会不太稳定。。