随记:Element UI 图片预览

Element UI 图片预览

今日随记:Tips for Element UI Image Preview

In Element UI's image preview component, the official examples typically demonstrate the preview functionality using a list of multiple images. Here's an example code:

在 Element UI 的图片预览组件中,官网示例通常会使用多张图片的列表来实现预览功能,如下代码所示:

html 复制代码
<div class="demo-image__preview">
    <el-image 
        style="width: 100px; height: 100px"
        :src="url" 
        :preview-src-list="srcList">
    </el-image>
</div>

<script>
export default {
    data() {
        return {
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            srcList: [
                'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
            ]
        }
    }
}
</script>

Note: The preview functionality won't work if you only pass in a single image, as the preview list requires an array.

注意:如果只传入一张图片,则预览功能不会生效,因为预览列表要求是数组。

Solution: Even with a single image, you should wrap it in an array. For example:

解决办法:即使只有一张图片,也应该将图片包装在数组中。例如:

html 复制代码
<el-image :src="selectedPerson.avatar" :preview-src-list="[selectedPerson.avatar]"></el-image>

This way, you can enable the preview functionality even with just one image.

通过这种方式,即便只有一张图片,依然可以启用预览功能。

Summary / 总结

  • Element UI's image preview component requires an array of preview images.

  • When dealing with a single image, wrap it in an array instead of passing the string directly.

  • Element UI 的图片预览组件需要传入预览图片的数组。

  • 如果只有一张图片,不要直接传入字符串,而是包装成数组。