el-image圖片預覽顯示bug

财神给你送元宝發表於2024-10-28
原本程式碼
<el-table-column label="附件" width="120">
            <template #default="scope">
              <el-image
                  v-if="scope.row.attachmentUrl"
                  :src="scope.row.attachmentUrl"
                  :preview-src-list="[scope.row.attachmentUrl]"
                  style="width: 40px;height: 40px;border-radius: 5px">
              </el-image>
            </template>
          </el-table-column>


出現了各種bug

解決方案 ： 新增 preview-teleported 屬性即可

<el-table-column label="附件" width="120">
            <template #default="scope">
              <el-image
                  v-if="scope.row.attachmentUrl"
                  :src="scope.row.attachmentUrl"
                  :preview-src-list="[scope.row.attachmentUrl]"
                  style="width: 40px;height: 40px;border-radius: 5px"
                  preview-teleported>
              </el-image>
            </template>
          </el-table-column>

　　

相關文章