图片资源在项目中的使用

最新推荐文章于 2021-06-19 00:10:36 发布

i大俊

最新推荐文章于 2021-06-19 00:10:36 发布

阅读量1k

点赞数

分类专栏：图片专栏文章标签： image 项目前端错误处理

本文链接：https://blog.csdn.net/hope_It/article/details/86349302

版权

图片专栏专栏收录该内容

7 篇文章 1 订阅

订阅专栏

图片的使用

在日常项目中，图片是经常需要使用的。在此，整理了一些常用的图片相关知识
图片专题

错误处理（很常用，实用）

从服务器获取的图片资料可以用onerror做错误处理

onerror="javascript:this.src='images/home/monitor.png'"

设置最大宽度与最大高度，防止图片非等比缩放

.img {
    max-width: 100%;
    max-height: 100%;
}

降低图片的大小

图片压缩，采用图片压缩工具，智图-图片压缩

减少HTTP网络请求

将多张图片合成一张图片，可以有效减少http网络请求。特别是一些小图标多的页面，还有一些组件里面的图片

cssSprites(雪碧图制作)

1. 用PS制作
2. 用在线工具合成图片，background-position都动生成。[Snipaste-1.16.2-x64](https://pan.baidu.com/s/1I21_g79e77Jjhk5xUJ5PoA)
3. 用webpack，gulp等新的项目构建工具以它们的一些插件，可以用它们自动合并、压缩图片，处理图片引用

gulp

```
const gulp = require('gulp');
// 自动同步浏览器插件
const browserSync = require('browser-sync');
// 同步运行任务插件
const runSequence = require('run-sequence');
// buffer流转换
const buffer = require('vinyl-buffer');
// 项目路径
const projecturl = 'gulp-cssSprites';
// cssSprites压缩
const gulpSpritesmith = require('gulp.spritesmith');
const gutil = require('gulp-util');
const imagemin = require('gulp-imagemin');

gulp.task('spritesmith', () => {
    gulp.src('./images/*.png')
    .pipe(buffer())
    .pipe(imagemin())
    .pipe(gulpSpritesmith({
        imgName: 'sprites.png',
        cssName: 'sprites.css' // Supported CSS extensions are .css (CSS), .sass (SASS), .scss (SCSS), .less (LESS), .styl/.stylus (Stylus), and .json (JSON)
    }))
    // .pipe(imagemin())
    .on('error', gutil.log)
    .pipe(gulp.dest(projecturl + '/cssSprites'))
})

// 起本地静态资源服务器，及监听
gulp.task('browserSync', () => {
    browserSync({
        server: {
            baseDir: ''
        }
    })
});

// 监听文件修改
gulp.task('watch', ['browserSync', 'spritesmith'], () => {

    gulp.watch(['*.png'], browserSync.reload);

})

// 默认任务
gulp.task('default', (callback) => {
    runSequence(['browserSync', 'watch'], callback);
})
```
**cssSprites使用**

利用CSS的background-image，background- repeat，background-position的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置
```
.icon-ANALYSIS_4 {
background-image: url(sprites.png);
background-position: -18px -17px;
width: 17px;
height: 17px;
}
```

字体图库代替图标

常用的有font-awesom,在项目图标不是非常多的时候也可以采用自定义字体图标库 Iconfont

SVG技术替换图片

SVG是基于XML（Extensible Markup Language），用来描述二维矢量及矢量/栅格图形。SVG提供了3种类型的图形对象：矢量图形（vectorgraphicshape例如：由直线和曲线组成的路径）、图象(image)、文本(text)。图形对象还可进行分组、添加样式、变换、组合等操作，特征集包括嵌套变换（nestedtransformations）、剪切路径（clippingpaths）、alpha蒙板（alphamasks）、滤镜效果（filtereffects）、模板对象（templateobjects）和其它扩展（extensibility）。

特点

它提供了目前网络流行的GIF和JPEG格式无法具备的优势：可以任意放大图形显示，但绝不会以牺牲图像质量为代价；可在SVG图像中保留可编辑和可搜寻的状态；平均来讲，SVG文件比JPEG和GIF格式的文件要小很多，因而下载也很快。
SVG 使用 XML 格式定义图形
SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。
SVG 图像可在任何的分辨率下被高质量地打印

引用方式

直接引用

<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <circle id="circle" cx="400" cy="300" r="50" />
</svg>

独立的文件引用

<img src="circle.svg">
<iframe id="if" src="circle.svg"></iframe>
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="circle.svg" type="image/svg+xml">

symbol标签引用,可自定应viewBox（关于viewBox和preserveAspectRatio还需要另外去了解），这是 SVG xLink 引用时最重要的标签

	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0;visibility:hidden">
		<defs>
			<symbol viewBox="0 0 28 33" id="user">
				<path fill-rule="evenodd" d="M20.798 19.289c2.636-2.002 4.215-5.091 4.215-8.437 0-5.886-4.845-10.647-10.808-10.647S3.397 4.966 3.397 10.852c0 3.345 1.578 6.433 4.212 8.435l.264-2.678C4.358 18.32 1.591 21.403.168 25.187l1.478.556v-1.579c-1.485.73-1.485.73-1.501 1.079-.054.188-.054.188-.069.278a2.58 2.58 0 0 0-.026.229 9.112 9.112 0 0 0-.019.4c-.008.265-.014.617-.018 1.039-.005.511-.006 1.037-.006 1.451v.027c-.004 1.732 1.41 3.129 3.154 3.129h22.082a3.18 3.18 0 0 0 3.172-3.153l.011-1.305.008-.897.003-.296.001-.083v-.022-.006-.001l.002-.278-.093-.262c-1.385-3.918-4.203-7.122-7.812-8.88l.263 2.678zm-1.911-2.516l-2.045 1.553 2.309 1.125c2.856 1.392 5.106 3.949 6.218 7.093l-.09-.54V26.033l-.001.083-.003.296-.008.897-.011 1.305c0 .01-.011.021-.013.021H3.161c-.007 0 .005.011.005.032v-.031c0-.404.001-.92.006-1.418.004-.4.01-.732.017-.969.004-.121.008-.212.012-.262l-.006.043c-.009.06-.009.06-.058.229-.01.336-.01.336-1.49 1.063H2.74l.385-1.024c1.141-3.035 3.35-5.495 6.131-6.849l2.309-1.124-2.045-1.554c-1.859-1.412-2.964-3.576-2.964-5.92 0-4.129 3.418-7.488 7.649-7.488s7.649 3.359 7.649 7.488c0 2.344-1.106 4.509-2.966 5.921z"
				 class="path1">
				</path>
			</symbol>
		</defs>
	</svg>
	<div class="box">
		<svg class="svg">
			<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
		</svg>
	</div>