2020-08-25【图片展示/视频播放】-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_32265719/article/details/108216897

本文介绍了在Vue项目中处理图片上传和视频双录（影像+声音）展示的场景，重点关注了element轮播图的图片放大效果以及图片自适应策略。文章详细解释了不同CSS填充模式如contain、cover、fill等在处理图片显示时的作用，并提到了图片和视频展示的相关插件安装及视频播放参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景： vue 项目图片上传，视频双录（影像+声音）展示

element轮播图图片放大插件

element轮播图图片放大效果

图片自适应

contain 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。
整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
cover 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
fill 被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
contain 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
none被替换的内容将保持其原有的尺寸。
scale-down 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

	<el-image :src="item.cInneturl" fit="fill" lazy>
	  <div slot="error" class="image-slot">
	    <i class="el-icon-picture-outline"></i>
	  </div>
	</el-image>

// indexOf() 方法返回指定值在字符串对象中首次出现的位置。从fromIndex位置开始查找 如果不存在 则返回-1
"http://192.168.50.22:5582/image/CD816BA1-860F-4426-A957-C6D043B00600head.jpg".substr(25);
// "/image/CD816BA1-860F-4426-A957-C6D043B00600head.jpg"

插件安装

npm install vue-video-player -S
npm install vue-lazyload
npm install v-viewer

组件注入

// main.js
// viewer  图片放大
import Viewer from