Conversation
Walkthrough在 Image 组件（React 与 Web）中引入环境感知且可覆写的 LEGO CDN URL 解析与解析器优先级，替换原先单一常量；更新脚本检测与注入以使用新解析器并在无 DOM 环境下加保护；优化 lego:// 解析为常量化处理；新增 README 文档说明与配置方法。 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as 用户代码
participant C as Image组件
participant R as getLegoCdnUrl
participant W as window
participant T as Taro全局
participant D as document
participant CDN as LEGO CDN
U->>C: 传入 src（可能为 lego://...）
C->>C: parseLegoUrl()
alt src 为 lego://
C->>R: 请求解析 CDN URL
R->>W: 读取 __TARO_IMAGE_LEGO_CDN_URL__
alt 存在 window 覆写
R-->>C: 返回 window 覆写
else 检查 Taro 覆写
R->>T: 读取 Taro.__TARO_IMAGE_LEGO_CDN_URL__
alt 存在 Taro 覆写
R-->>C: 返回 Taro 覆写
else 环境判定（PROD/DEV）
R-->>C: 返回默认 PROD 或 DEV CDN
end
end
C->>C: isLegoScriptLoaded(resolvedUrl)
alt 未加载脚本
C->>D: 检查 document 可用性
alt 有 DOM
C->>D: insertLegoScript(src=resolvedUrl)
D->>CDN: 请求脚本
CDN-->>D: onload
D-->>C: 脚本可用
else 无 DOM
Note right of C: 跳过注入（SSR/非浏览器），记录警告
end
end
C->>C: 渲染 canvas-tag（lego 模式）
else 其他协议
C->>C: 渲染 img
end
Note over C: 解析协议使用 LEGO_PROTOCOL 常量并用 slice()
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #18390 +/- ##
========================================
Coverage 55.97% 55.97%
========================================
Files 416 416
Lines 21560 21560
Branches 5264 5279 +15
========================================
Hits 12069 12069
- Misses 7907 8009 +102
+ Partials 1584 1482 -102
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
ZakaryCode
reviewed
Sep 25, 2025
| ---------------------------------------------- | ||
|
|
||
| *Built with [StencilJS](https://stenciljs.com/)* | ||
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/taro-components-react/src/components/image/index.tsx(1 hunks)packages/taro-components/src/components/image/image.tsx(2 hunks)packages/taro-components/src/components/image/readme.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/taro-components/src/components/image/readme.md
- packages/taro-components-react/src/components/image/index.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
packages/taro-components/src/components/image/image.tsx (3)
packages/taro-plugin-http/src/__tests__/dom.spec.js (1)
document(4-4)packages/babel-plugin-transform-solid-jsx/src/shared/component.js (1)
tagId(32-32)packages/babel-plugin-transform-solid-jsx/src/shared/transform.js (1)
text(103-108)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Build Rust Binding / stable - aarch64-apple-darwin
- GitHub Check: Build Rust Binding / stable - x86_64-pc-windows-msvc
- GitHub Check: Build Rust Binding / stable - x86_64-apple-darwin
- GitHub Check: Build Rust Binding / stable - x86_64-pc-windows-msvc
- GitHub Check: Build Rust Binding / stable - aarch64-apple-darwin
- GitHub Check: Build Rust Binding / stable - x86_64-apple-darwin
Comment on lines
+21
to
+35
| const LEGO_CDN_URL_DEV = 'http://ossin.jd.com/swm-plus/h5Tag/tag.js' | ||
| const LEGO_CDN_URL_PROD = 'https://storage.jd.com/static-frontend/h5-tag/1.0.0/tag.min.js' | ||
|
|
||
| const getLegoCdnUrl = (): string => { | ||
| // 允许通过 Taro 全局对象覆盖（最高优先级） | ||
| const taroOverride = (typeof window !== 'undefined' && (window as any).Taro && (window as any).Taro.__TARO_IMAGE_LEGO_CDN_URL__) | ||
| if (taroOverride && typeof taroOverride === 'string') return taroOverride | ||
|
|
||
| // 允许通过 window 全局变量覆盖 | ||
| const windowOverride = (typeof window !== 'undefined' && (window as any).__TARO_IMAGE_LEGO_CDN_URL__) | ||
| if (windowOverride && typeof windowOverride === 'string') return windowOverride | ||
|
|
||
| // 基于环境选择 | ||
| const isProd = (typeof process !== 'undefined' && (process as any).env && (process as any).env.NODE_ENV === 'production') | ||
| return isProd ? LEGO_CDN_URL_PROD : LEGO_CDN_URL_DEV |
There was a problem hiding this comment.
请避免在 HTTPS 页面下注入 HTTP LEGO 脚本
在非 production 环境下固定返回 http://ossin.jd.com/...。一旦 H5 页面通过 HTTPS 提供（常见于预发／测试环境），浏览器会因混合内容策略直接拦截该脚本，导致 LEGO 模式完全失效。此前常量是 HTTPS，这个回退到 HTTP 会让原本可用的场景出问题。
建议在判定非生产环境时，再根据页面协议兜底回退到 HTTPS 地址，例如：
const getLegoCdnUrl = (): string => {
// 允许通过 Taro 全局对象覆盖（最高优先级）
const taroOverride = (typeof window !== 'undefined' && (window as any).Taro && (window as any).Taro.__TARO_IMAGE_LEGO_CDN_URL__)
if (taroOverride && typeof taroOverride === 'string') return taroOverride
// 允许通过 window 全局变量覆盖
const windowOverride = (typeof window !== 'undefined' && (window as any).__TARO_IMAGE_LEGO_CDN_URL__)
if (windowOverride && typeof windowOverride === 'string') return windowOverride
// 基于环境选择
const isProd = (typeof process !== 'undefined' && (process as any).env && (process as any).env.NODE_ENV === 'production')
- return isProd ? LEGO_CDN_URL_PROD : LEGO_CDN_URL_DEV
+ if (isProd) return LEGO_CDN_URL_PROD
+ if (typeof window !== 'undefined' && window.location && window.location.protocol === 'https:') {
+ return LEGO_CDN_URL_PROD
+ }
+ return LEGO_CDN_URL_DEV
}这样既保留了可覆写能力，又不会在 HTTPS 场景下触发混合内容拦截。
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const LEGO_CDN_URL_DEV = 'http://ossin.jd.com/swm-plus/h5Tag/tag.js' | |
| const LEGO_CDN_URL_PROD = 'https://storage.jd.com/static-frontend/h5-tag/1.0.0/tag.min.js' | |
| const getLegoCdnUrl = (): string => { | |
| // 允许通过 Taro 全局对象覆盖（最高优先级） | |
| const taroOverride = (typeof window !== 'undefined' && (window as any).Taro && (window as any).Taro.__TARO_IMAGE_LEGO_CDN_URL__) | |
| if (taroOverride && typeof taroOverride === 'string') return taroOverride | |
| // 允许通过 window 全局变量覆盖 | |
| const windowOverride = (typeof window !== 'undefined' && (window as any).__TARO_IMAGE_LEGO_CDN_URL__) | |
| if (windowOverride && typeof windowOverride === 'string') return windowOverride | |
| // 基于环境选择 | |
| const isProd = (typeof process !== 'undefined' && (process as any).env && (process as any).env.NODE_ENV === 'production') | |
| return isProd ? LEGO_CDN_URL_PROD : LEGO_CDN_URL_DEV | |
| const LEGO_CDN_URL_DEV = 'http://ossin.jd.com/swm-plus/h5Tag/tag.js' | |
| const LEGO_CDN_URL_PROD = 'https://storage.jd.com/static-frontend/h5-tag/1.0.0/tag.min.js' | |
| const getLegoCdnUrl = (): string => { | |
| // 允许通过 Taro 全局对象覆盖（最高优先级） | |
| const taroOverride = | |
| typeof window !== 'undefined' && | |
| (window as any).Taro && | |
| (window as any).Taro.__TARO_IMAGE_LEGO_CDN_URL__ | |
| if (taroOverride && typeof taroOverride === 'string') return taroOverride | |
| // 允许通过 window 全局变量覆盖 | |
| const windowOverride = | |
| typeof window !== 'undefined' && (window as any).__TARO_IMAGE_LEGO_CDN_URL__ | |
| if (windowOverride && typeof windowOverride === 'string') return windowOverride | |
| // 基于环境选择 | |
| const isProd = | |
| typeof process !== 'undefined' && | |
| (process as any).env && | |
| (process as any).env.NODE_ENV === 'production' | |
| if (isProd) return LEGO_CDN_URL_PROD | |
| if ( | |
| typeof window !== 'undefined' && | |
| window.location && | |
| window.location.protocol === 'https:' | |
| ) { | |
| return LEGO_CDN_URL_PROD | |
| } | |
| return LEGO_CDN_URL_DEV | |
| } |
🤖 Prompt for AI Agents
In packages/taro-components/src/components/image/image.tsx around lines 21 to
35, the dev constant always returns an HTTP URL which causes mixed-content
blocking on HTTPS pages; preserve the existing override checks but when falling
back in non-production detect the page protocol (window.location.protocol ===
'https:') and if the page is HTTPS return a secure (HTTPS) LEGO CDN URL (or the
existing prod HTTPS URL variant for dev), otherwise return the HTTP dev URL;
ensure all window and location access is guarded by typeof window !==
'undefined' to avoid SSR errors.
This was referenced Sep 27, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
这个 PR 做了什么？ (简要描述所做更改)
这个 PR 是什么类型？ (至少选择一个)
这个 PR 涉及以下平台：
Summary by CodeRabbit