图片前缀拼接

acupuncture-前台/src/views/screening/qrCode.vue

@@ -86,12 +86,22 @@
         label="二维码"
         align="center"
         prop="name"
-        min-width="100"
+        min-width="120"
+      >
+        <template slot-scope="scope">
+          <img
+            :src="qzUrl + scope.row.url"
+            alt=""
+            width="100"
+            height="100"
+            @click="Original(scope.row.url)"
           />
+        </template>
+      </el-table-column>
       <el-table-column
         label="组织"
         align="center"
-        prop="name"
+        prop="tenantName"
         min-width="100"
       />
 
@@ -167,6 +177,11 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <el-image
+      :preview-src-list="imgUrl"
+      ref="preview"
+      style="display: none"
+    ></el-image>
   </div>
 </template>
 
@@ -178,6 +193,8 @@ export default {
   dicts: ["sys_notice_status", "sys_notice_type"],
   data() {
     return {
+      qzUrl: process.env.VUE_APP_API_QZURL, // 二维码路径
+      imgUrl: [],
       tenantsListData: [], // 组织列表
       loading: false, // 遮罩层
       ids: [], // 选中数组
@@ -216,6 +233,13 @@ export default {
     this.getTenantsList(); // 组织列表
   },
   methods: {
+    Original(_url) {
+      this.imgUrl = [];
+      if (_url) {
+        this.imgUrl.push(this.imgPrefix + _url);
+      }
+      this.$refs.preview.clickHandler();
+    },
     // 组织列表
     getTenantsList() {
       tenantsList({