修改图片预览

src/views/contentManagement/activity/info/index.vue

@@ -337,7 +337,7 @@
       </div>
     </div>
     <el-dialog :visible.sync="open" width="500px" append-to-body>
-      <div v-if="form.details" class="preview-content" v-html="form.details" />
+      <div v-if="formattedDetails" class="preview-content" v-html="formattedDetails" />
       <div v-else>暂无预览内容</div>
     </el-dialog>
     <!--   按钮区  -->
@@ -436,6 +436,18 @@ export default {
     // 第一种禁用情况 1.查看的情况
     secondFromDisabled() {
       return (this.controls.isOperation === '3')
+    },
+    formattedDetails() {
+      if (!this.form.details) return ''
+      // 使用正则表达式查找并替换 <img> 标签
+      const updatedHtml = this.form.details.replace(/<img[^>]+>/gi, (match) => {
+        // 检查是否已经有 width 和 height 属性
+        if (!/width\s*=\s*('|")[^'|"]+('|")/i.test(match)) {
+          match = match.replace(/\/?>/i, ' style="max-width: 100%; height: auto;" />')
+        }
+        return match
+      })
+      return updatedHtml
     }
   },
   mounted() {
@@ -658,15 +670,10 @@ export default {
   padding: 10px;
   background-color: #f9f9f9;
   min-height: 736px;
-  min_width: 414px;
+  min-width: 414px;
   word-wrap: break-word;
-  overflow: hidden;
 }
 
-.preview-content img {
-  max-width: 100%;
-  height: auto;
-}
 ::v-deep.avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;

src/views/contentManagement/notice/info/index.vue

@@ -143,7 +143,7 @@
       </div>
     </div>
     <el-dialog :visible.sync="open" width="500px" append-to-body>
-      <div v-if="form.details" class="preview-content" v-html="form.details" />
+      <div v-if="formattedDetails" class="preview-content" v-html="formattedDetails" />
       <div v-else>暂无预览内容</div>
     </el-dialog>
     <!--   按钮区  -->
@@ -250,6 +250,18 @@ export default {
     // 第一种禁用情况 1.查看的情况
     secondFromDisabled() {
       return (this.controls.isOperation === '3')
+    },
+    formattedDetails() {
+      if (!this.form.details) return ''
+      // 使用正则表达式查找并替换 <img> 标签
+      const updatedHtml = this.form.details.replace(/<img[^>]+>/gi, (match) => {
+        // 检查是否已经有 width 和 height 属性
+        if (!/width\s*=\s*('|")[^'|"]+('|")/i.test(match)) {
+          match = match.replace(/\/?>/i, ' style="max-width: 100%; height: auto;" />')
+        }
+        return match
+      })
+      return updatedHtml
     }
   },
   mounted() {
@@ -497,14 +509,10 @@ export default {
   padding: 10px;
   background-color: #f9f9f9;
   min-height: 736px;
-  min_width: 414px;
+  min-width: 414px;
   word-wrap: break-word;
 }
 
-.preview-content img {
-  max-width: 100%;
-  height: auto;
-}
 ::v-deep.avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;