## Image ### Semantic Parts - root（`semantic-mark-root`）: Root element, sets relative positioning and inline-block layout styles - image（`semantic-mark-image`）: Image element, sets width, height and vertical alignment styles - cover（`semantic-mark-cover`）: Image hover display prompt element, sets absolute positioning, background color, opacity and transition animation styles - popup.root（`semantic-mark-popup-root`）: Preview root element, sets fixed positioning, z-index and background mask styles - popup.mask（`semantic-mark-popup-mask`）: Preview mask element, sets absolute positioning and semi-transparent background styles - popup.body（`semantic-mark-popup-body`）: Preview body element, sets flex layout, center alignment and pointer event styles - popup.footer（`semantic-mark-popup-footer`）: Preview footer element, sets absolute positioning, center layout and bottom operation area styles - popup.actions（`semantic-mark-popup-actions`）: Preview actions group element, sets flex layout, background color, border radius and action button styles - popup.close（`semantic-mark-popup-close`）: Preview close button element, sets basic button styles ### Usage Example ```tsx ``` ### Abstract DOM Structure ```html
```