### 在 `
rich-text` 中
设置或修改
图片大小的方法
在 `
rich-text` 组件中调整
图片大小，可以通过正则表达式对富文本内容中的 `<img>` 标签进行样式替换来实现。以下是具体方法和代码示例：
#### 方法一：通过正则表达式动态添加样式
可以使用正则表达式将富文本中的 `<img>` 标签替换为带有指定样式的标签。例如，将所有
图片的宽度限制为屏幕宽度的 100%，并添加圆角效果[^2]。
```javascript
const regex = new RegExp('<img', 'gi');
this.item.content = this.item.content.replace(regex, '<img style="max
-width:100%; height:auto; border
-radius:10px;"');
```
此代码片段会确保所有
图片不会超出屏幕宽度，并保持高度比例不变，同时应用圆角效果。
#### 方法二：清除默认样式并统一
设置
如果后台返回的富文本数据中包含
图片的默认样式（如固定的宽高），需要先清除这些样式，然后统一添加新的样式[^4]。
```javascript
var content_new = content
.replace(/<img([\s\w"
-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1') // 移除 height 属性
.replace(/<img([\s\w"
-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1') // 移除 width 属性
.replace(/<img([\s\w"
-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1') // 移除 style 属性
.replace(/<img([\s\w"
-=\/\.:;]+)/ig, '<img$1 ') // 确保标签格式正确
.replace(/<img/gi, '<img class="
rich-img" '); // 添加自定义类名
```
在此基础上，可以在 CSS 中定义 `.
rich-img` 类的样式：
```css
.
rich-img {
max
-width: 100%;
height: auto;
border
-radius: 10px;
}
```
#### 方法三：直接操作 DOM 节点（仅适用于部分场景）
在某些情况下，可以直接监听 `
rich-text` 渲染完成后的 DOM 节点，并动态调整
图片大小。例如，在微信小程序中可以使用 `wx.createSelectorQuery()` 来选择
图片节点并
设置样式[^3]。
```javascript
wx.createSelectorQuery().selectAll('
rich-text img').boundingClientRect(rects => {
rects.forEach(rect => {
const img = wx.createSelectorQuery().select(`#image
-${rect.id}`);
img.style({
width: `${rect.width}px`,
height: `${rect.height}px`
});
});
}).exec();
```
#### 注意事项
- 如果富文本内容中存在空的 `style=""` 属性，可能会导致样式不生效。因此，需要先移除这些空属性[^1]。
- 在处理富文本时，建议优先使用正则表达式调整
图片样式，以确保兼容性和一致性。
- 需要确保
图片的 `max
-width`
设置为 `100%`，以便在不同设备上自动适配屏幕宽度。
### 示例代码整合
以下是一个完整的代码示例，展示如何在 UniApp 或微信小程序中处理富文本
图片大小：
```javascript
export default {
data() {
return {
content: '' // 富文本内容
};
},
methods: {
processContent() {
let processedContent = this.content
.replace(/<img([\s\w"
-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1') // 移除 style 属性
.replace(/<img([\s\w"
-=\/\.:;]+)/ig, '<img$1 ') // 确保标签格式正确
.replace(/<img/gi, '<img style="max
-width:100%; height:auto; border
-radius:10px;"'); // 添加样式
this.content = processedContent;
}
},
onLoad() {
this.processContent();
}
};
```
```html
<
rich-text :nodes="content"></
rich-text>
```
这段代码主要用于处理博客内容中的图片，通过遍历`nodes`数组，查找并设置每个图片节点的样式，确保图片宽度为100%，从而适应显示需求。
扫一扫
8094
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
