flutter_quill:10.8.5如何让quilleditor.basic显示插入网络图片

我在使用flutter_quill 10.8.5版本时遇到了问题，QuillEditor.basic无法显示插入的网络图片。已尝试通过ImageBlockComponent加载图片，但图片只显示空白或占位符。请问该如何正确配置才能使网络图片正常显示？是否需要额外设置图片加载器或处理网络请求？

2 回复

在Flutter Quill 10.8.5中，要让QuillEditor.basic显示网络图片，需启用image模块并配置图片插入功能。在初始化时设置image属性，使用ImageProvider加载网络图片即可。

更多关于flutter_quill:10.8.5如何让quilleditor.basic显示插入网络图片的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter Quill 10.8.5 中，要让 QuillEditor.basic 显示网络图片，需要通过配置 imageEmbed 属性来实现。以下是具体步骤和代码示例：

  1. 配置 QuillEditor：

    QuillEditor.basic(
  controller: _controller,
  readOnly: false,
  imageEmbed: ImageEmbed(
    onImageLoad: (imageUrl) async {
      final response = await http.get(Uri.parse(imageUrl));
      if (response.statusCode == 200) {
        return response.bodyBytes;
      }
      throw Exception('Failed to load image');
    },
  ),
)

  2. 插入网络图片（通过代码插入）：

    final index = _controller.selection.baseOffset;
final length = _controller.selection.extentOffset - index;
_controller.replaceText(
  index,
  length,
  BlockEmbed.image('https://example.com/image.jpg'),
  TextSelection.collapsed(offset: index + 1),
);

说明：

  • 使用 imageEmbed 属性处理网络图片加载。
  • 通过 BlockEmbed.image 插入图片 URL。
  • 确保添加 http 依赖（pubspec.yaml 中添加 http: ^0.13.0 或更高版本）。

这样即可在编辑器中显示并插入网络图片。

回到顶部