[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]

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

可是我在minio里添加了跨域设置啊

  minio:
    image: minio/minio
    container_name: lobe-minio
    ports:
      - '19000:9000'
      - '19001:9001'
    volumes:
      - './s3_data:/data'
    environment:
      - 'MINIO_ROOT_USER=（占位符）'
      - 'MINIO_ROOT_PASSWORD=（占位符）'
      - 'MINIO_DOMAIN=minio.（占位符）'
      - 'MINIO_API_CORS_ALLOW_ORIGIN=https://lobechat.（占位符）' # Your LobeChat's domain name.
    restart: always
    command: >
      server /data --address ":9000" --console-address ":9001"

[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. .