el-image-viewer去除旁边黑色的背景

可以尝试在样式中添加以下代码：

.el-image-viewer__wrapper {
background-color: transparent;
}
.el-image-viewer__mask {
background-color: transparent;
}

这样将.el-image-viewer__wrapper的背景色改为透明，即可去除旁边黑色的背景。同时，通过将.el-image-viewer__mask的背景色也设置为透明，可以使遮罩层的背景也变为透明。

相关问题

el-image-viewer修改大小

el-image-viewer是element-ui中的一个组件，用于显示图片的预览。要修改el-image-viewer的大小，可以通过以下方法实现：

1. 使用CSS样式修改大小：
可以通过给el-image-viewer添加自定义的CSS样式来修改其大小。例如，可以使用`width`和`height`属性来设置宽度和高度，或者使用`transform`属性来缩放元素的大小。

<el-image-viewer class="custom-image-viewer"></el-image-viewer>

<style>
.custom-image-viewer {
  width: 500px;
  height: 300px;
}
</style>

2. 修改默认尺寸：
el-image-viewer的默认尺寸可以通过修改element-ui的样式来实现。可以在项目中的样式文件中添加自定义的CSS样式，覆盖element-ui的默认样式。

.el-image-viewer__wrapper {
  width: 500px;
  height: 300px;
}

请注意，以上方法仅适用于修改el-image-viewer的大小。如果需要修改el-image-viewer中图片的大小，可以使用CSS样式或者修改图片的尺寸属性。

el-image-viewer的使用

el-image-viewer 是 Element UI 中的图片预览组件，可以实现图片的放大、缩小、旋转等操作，下面是它的使用方法：

1. 安装 Element UI

在使用 el-image-viewer 之前，需要先在你的项目中安装 Element UI，可以使用 npm 或 yarn 进行安装。

# 使用 npm 安装
npm install element-ui --save

# 或使用 yarn 安装
yarn add element-ui

2. 引入 el-image-viewer 组件

在需要使用 el-image-viewer 的组件中，引入 el-image-viewer 组件。

import { Image,ImageViewer } from 'element-ui';

3. 使用 el-image-viewer 组件

在需要使用 el-image-viewer 的地方，使用 el-image-viewer 标签包裹 Image 组件，并将需要展示的图片的 URL 作为 Image 组件的属性传入。

<template>
  <div>
    <el-image-viewer :url="imageUrl">
      <el-image :src="imageUrl"></el-image>
    </el-image-viewer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://xxx.com/image.png'
    }
  }
}
</script>

这样就完成了 el-image-viewer 组件的基本使用。需要注意的是，el-image-viewer 组件需要和 el-image 组件一起使用，而且必须将 el-image 组件放在 el-image-viewer 组件内部。