背景：

在项目中需要展示多张图片，但在页面上只有一张图片的有限位置，此时考虑使用轮播图实现多张图片的展示。element组件官网有走马灯Carousel的组件详细介绍。

实现效果：

官网链接：点击跳转

核心代码：

<el-carouselstyle="width: 100%; height: 100%":interval="5000":trigger="'click'":indicator-position="'none'"><el-carousel-itemv-for="(item, index) of state.ferryPortdata.photoList":key="index"><div class="aspect-container"><el-imageclass="carousel-image":src="BASEUrl + '/file/' + item.file":preview-src-list="[BASEUrl + '/file/' + item.file]":preview-teleported="true"alt=""fit="cover"/></div></el-carousel-item></el-carousel>

组件的属性：

走马灯组件的属性，如下：

autoplay：是否自动切换。默认值true

interval：自动切换的时间间隔，单位为毫秒。默认值3000

trigger：指示器的触发方式。属性值：'hover' | 'click' 。默认值hover

indicator-position：指示器的位置。属性值3种：'' | 'none' | 'outside'

默认情况下，它会显示在走马灯内部，设置为 outside 则会显示在外部；设置为 none 则不会显示指示器。

el-image图片组件的属性，如下：

src ：图片源地址

fit：图片如何适应容器框。属性值：'' | 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'

preview-src-list：开启图片预览功能。string[]

preview-teleported：image-viewer 是否插入至 body 元素上。

嵌套的父元素属性会发生修改时应该将此属性设置为 true【即图片放大到全局】

写到这儿。。。走马灯轮播图的效果就实现了。。。

下面是走马灯的图片的点击放大效果。

走马灯点击放大：

思路如下：

走马灯的图片点击放大实现思路如下：：

1、查看走马灯组件是否有click点击事件。

2、自定义一个click事件，绑定在图片身上，当点击图片触发图片放大的效果 。

3、el-image图片组件，图片点击放大的属性且放大到全局。推荐用法！！！

1、走马灯组件是否有点击事件：

通过访问走马灯组件的官网知道，走马灯没有相应的点击事件

2、自定义图片的点击事件：

给走马灯组件内部的每一张图片绑定click自定义事件，自定义事件实现图片放大效果 

实现效果：

核心代码：

 点击事件：

const showPreview = ref(false);
const handleClick = (data) => {showPreview.value = true;state.imgSrc = BASEUrl + "/file/" + data.file;
};

图片预览组件： 

//图片预览el-image-viewer组件
//state.imgSrc是每次点击图片的地址
<el-image-viewerv-if="showPreview":url-list="[state.imgSrc]"@close="showPreview = false"/>

图片预览官网链接：点击跳转

 

3、el-image图片组件的点击放大【推荐】：

实现效果：

图片能够实现点击放大，并且放大到全局。放大到全局需要设置el-image的一个属性preview-teleported=“true”，用于控制image-viewer 是否插入至 body 元素上。

官网链接：点击跳转

 

未设置效果： 

 

设置代码及效果：

//el-image图片预览效果，image-viewer相对于标签body
//:preview-teleported="true"<el-imagev-if="state.sixNoData.photo"class="img-style":src="BASEUrl + '/file/' + state.sixNoData.photo"alt=""fit="cover":preview-src-list="[BASEUrl + '/file/' + state.sixNoData.photo]":preview-teleported="true"/>

备注：

问：走马灯组件和图片预览组件的代码应该怎么组合使用？

走马灯组件和图片预览组件放置在同级，如下：

不能这样放：

 问题：图片为什么显示加载失败？

  答：图片涉及到了跨域处理，前端做了对一个图片地址src的访问代理。

接口返回的数据如下：

other/fe9824e5-e1bf-4af8-9e19-9ce508e19fd4.jpg

前端能够展示的src形式是：

/file/other/d19b3d89-5ac5-46e5-a004-8cd51434168e.jpg是文件存放路径

BASEUrl + '/file/' + item.file

即：

 /apiproxy/pa/file/other/d19b3d89-5ac5-46e5-a004-8cd51434168e.jpg

 /apiproxy/pa是前端代理

问题：state.ferryPortdata.photoList响应式变量的数据结构是什么样的？

答：是接口返回的数据，其中涉及到的数据，示例如下：

//涉及到的数据
[{"pid": 142,"category": null,"type": 6,"file": "other/fe9824e5-e1bf-4af8-9e19-9ce508e19fd4.jpg","associationId": 119,"dateOfIssue": "2025-03-13 14:06:45","deadline": null,"isValid": null},{"pid": 143,"category": null,"type": 6,"file": "other/e1ce36cc-7085-490c-bb9d-b4589590c751.jpg","associationId": 119,"dateOfIssue": "2025-03-13 14:06:45","deadline": null,"isValid": null},{"pid": 144,"category": null,"type": 6,"file": "other/c2fc72b8-ec93-4f4d-bdaf-866fe8e3ad31.jpg","associationId": 119,"dateOfIssue": "2025-03-13 14:06:45","deadline": null,"isValid": null},{"pid": 145,"category": null,"type": 6,"file": "other/a091bb95-66c3-4870-84ce-a9d34a0f81a1.jpg","associationId": 119,"dateOfIssue": "2025-03-13 14:06:45","deadline": null,"isValid": null},{"pid": 146,"category": null,"type": 6,"file": "other/d19b3d89-5ac5-46e5-a004-8cd51434168e.jpg","associationId": 119,"dateOfIssue": "2025-03-13 14:06:45","deadline": null,"isValid": null}
]