Rich Text Image Style

When working on projects, rich text is often used. When the backend passes a parameter in rich text format to you, you can use it <rich-text :nodes="value"></rich-text>to parse the rich text, but sometimes there will be pictures in the passed rich text. When we put When the picture is rendered to the page, it is found that the picture is not rendered on the page according to the way we want, and the following effect will appear. You can
insert image description here
see that the right side of the picture is obviously overflowing, so if you want to modify the style of the picture, you can modify it like this

this.aid = this.aid.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
						.replace(/<p>/ig, '<p style="font-size: 15px; line-height: 25px;">')
						.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
						.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
						.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
						.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
						.replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img style="width: 100%;" $1');

Guess you like

Origin blog.csdn.net/qq_49552046/article/details/120843279