fix(watermark): 小程序图片高度未撑开

[oasis-cloud]

Summary by CodeRabbit

• 新功能
  • 更新了图片显示方式：使用新的图片组件替换了传统的图片标签，实现了固定高度（200）的显示，并采用“aspectFit”模式以优化图片适配和视觉效果。

[coderabbitai]

Walkthrough

在 src/packages/watermark/demos/taro/demo2.tsx 文件中，更新了水印示例。开发者从 @nutui/nutui-react-taro 库中导入了 Image 组件，并将原先使用的标准 HTML <img> 标签替换成该 Image 组件。同时，对图片的属性进行了调整，将高度固定为 200，并新增了 mode="aspectFit" 属性，从而改变了图片的渲染方式。

Changes

文件路径	变更说明
src/.../demo2.tsx	导入 Image 组件；替换 <img> 标签；更新图片高度为200，并添加 mode="aspectFit" 属性

Sequence Diagram(s)

sequenceDiagram
    participant Demo2 as Demo2组件
    participant Image as NutUI Image组件
    participant 浏览器 as 浏览器
    Demo2 ->> Image: 请求加载图像 (src, height=200, mode="aspectFit")
    Image ->> 浏览器: 渲染图像
    浏览器 -->> Image: 返回渲染结果
    Image -->> Demo2: 完成图像显示

Loading

Poem

我是一只快乐的小兔子，
代码花园里闪烁着新光辉。
从旧影切换到NutUI的精粹，
高度定格二百，模式稳如飞。
跳跃间欢庆这闪亮的更新之美！

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 827ab5c and 1ba0c42.

📒 Files selected for processing (1)

• src/packages/watermark/demos/taro/demo2.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: test

🔇 Additional comments (2)

src/packages/watermark/demos/taro/demo2.tsx (2)

2-2: 导入 Image 组件代替标准HTML img标签，适应小程序环境

从 @nutui/nutui-react-taro 导入 Image 组件是一个很好的改进，因为小程序环境中原生 HTML 标签的行为可能与预期不同。专用的 Taro 组件能更好地处理小程序中的图片显示。

---

10-10: 修复图片高度问题的合理解决方案

这个改动解决了PR中提到的"小程序图片高度未撑开"的问题：

1. 使用了固定高度 height={200} 替代之前的百分比高度
2. 添加了 mode="aspectFit" 参数确保图片在固定高度下保持比例

这样的设置能确保图片在小程序环境中正确显示，同时水印可以正常应用在图片上。

如果您想确保所有场景下的效果都正常，建议检查不同尺寸图片下的显示效果，特别是宽高比例极端的图片。

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 86.05%. Comparing base (827ab5c) to head (1ba0c42).
Report is 2 commits behind head on feat_v3.x.

Additional details and impacted files

@@            Coverage Diff             @@
##           feat_v3.x    #3040   +/-   ##
==========================================
  Coverage      86.05%   86.05%           
==========================================
  Files            281      281           
  Lines          18255    18255           
  Branches        2749     2749           
==========================================
  Hits           15709    15709           
  Misses          2541     2541           
  Partials           5        5           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.