Watermark 设置图片
时间: 2023-07-04 18:22:29 浏览: 69
Ant Design Watermark 组件默认不支持设置图片作为水印,但你可以通过一些技巧来实现这个需求。具体做法是将图片转换成 base64 格式,然后将其作为 SVG 的背景图片,在 SVG 中添加文本作为水印。
以下是一个示例代码:
```jsx
import { Watermark } from 'antd';
function MyComponent() {
// 将图片转换成 base64 格式
const backgroundImage = 'url(data:image/png;base64,iVBORw0KG...)';
return (
<div>
<Watermark
text="My Watermark"
fontColor="rgba(0, 0, 0, 0.15)"
fontSize="16px"
zIndex={9999}
style={{ backgroundImage }}
/>
<p>这是我的组件内容</p>
</div>
);
}
```
在上面的代码中,我们将图片转换成了 base64 格式,并将其作为 Watermark 组件的样式属性 `backgroundImage` 的值,这样就可以将其作为 SVG 的背景图片了。然后我们在 SVG 中添加了文本作为水印,最终实现了带有图片的水印效果。需要注意的是,由于 SVG 是一种矢量图形格式,所以在设置图片时需要注意图片的分辨率和显示效果。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)