img src 遇到的坑, 引发的一系列拓展思考。
一. 遇到的问题, 如何解决
Vue 中 拼接静态的 静态路径时候, 使用 ../assets/img/xxx.png 失效的问题。
解决方式, 将路径改成 src 同级下面的 static目录中,./static/xxx.png
1、 各种实际详情例子
vue中的各种实例
前两种种都是编译前的
后两种则是编译之后的
涉及到 ./assets 和 ./static的区别
第一种: webpack 编译会通过vue-html-loader 和css-loader 将 assets 看做模块依赖解析,并从中获取 图片的信息,通过base64编码,引入嵌入成 html 中的内容。
第二种: require 是通过 file-loader 处理,并 return 处理之后的URL,y一些小数据被编译成 base64 嵌入到 html 中。
第三种:第三种vue指令编译之后,变成html5中访问相对url方式,由于编译之后的代码在内存中,默认是与 src 同级, 此时的相对路径错误,访问不到对应资源
第四种: src 同级下的 static 属于 “真正” 的静态资源,不会被 webpack 处理, 因此此时和第三种类似,可以被访问到。
2、 src 和 href 的区别?
答: src (source n&vt 资源,从... 获取资源) , 是引入资源,并替换当前元素,会将’指定的资源下载并引入到页面中来。'常用的有src 属性的元素有 img、script、 iframe...
当浏览器解析到src ,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等也如此,类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。
href (hypertext reference 超文本引用),是引用资源 和页面关联, 在页面和资源之间建立关联。常用的有href 属性的元素有 a、link、 iframe...
link css时候,若在文档中添加href ,浏览器会识别该文档为 CSS 文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS,而不是使用 @import 方式。
说白了: href 是连接, src 是替换当前元素吧
3、base64编码
是什么?
base64 是用于传输8bit字节码的一种转码方式,用64种可打印字符组成的文本来表示二进制数据。a-Z 、0-10 、* /
webpack 中 file-loader -> url-loader 中配置 limit , 可以将 小文件的图片资源 转换成 base64文本格式,放到捆绑包bound.js中使用。将图片像素转成文本方式,而不是使用服务器静态资源也会有一系列优缺点。
优缺点:
- base64是图片的文本格式,降低服务器资源损耗
- 网页使用base64, 不再请求服务器调用图片资源,减少对服务器请求
- 适用于不同平台、语言的传输
缺点:
- 大文件文件较长,不适合,存储在数据库也会增大数据库压力。
- 如果文本格式内容太多,加载网页的速度会下降,影响用户体验。
- base64无法缓存,只能缓存包含base64的文件,如js和css, 这比直接缓存图片较差,另外html改动频繁,没有缓存效益
常见的格式:
- data:,文本数据
- data:text/plain,文本数据
- data:text/html,HTML代码
- data:text/html;base64,base64编码的HTML代码
- data:text/css,CSS代码
- data:text/css;base64,base64编码的CSS代码
- data:text/javascript,Javascript代码
- data:text/javascript;base64,base64编码的Javascript代码
- data:image/gif;base64,base64编码的gif图片数据
- data:image/png;base64,base64编码的png图片数据
- data:image/jpeg;base64,base64编码的jpeg图片数据
- data:image/x-icon;base64,base64编码的icon图片数据
总结:
适用于小图片资源,它不是为了节省存储空间,而是为了减少请求,因为请求耗时且消耗服务器。
但图片过大,文本大损耗内存,并且请求时候更慢,得不偿失
4、import 和 require 的区别 (转载)
规范的区别:
require 是CommonJS/AMD规范;
import 是ES6中引入的,为了兼容会用babel转化成es5
调用时间的区别:
require: 在运行时候调用。
import :在编译的时候调用,因此一般放在前面,(当然不放在前面也会提升到前面的,效率更高一些)
本质:
require: 是赋值过程,因此一般在编译时候调用。
也就是拷贝过程
引入基础类型,属于复制
引入复杂类型,属于浅拷贝,未执行的模块不输出
import :是解构过程,也是引用过程(在export 中修改的只, 后面可以取到),为了兼容,一般node中会使用babel,将es6转成es5的require
let { exists, readFile } = require('fs');
会加载 整个 fs 模块,然后取用 其中的两个方法
// ES6模块
import { exists, readFile } from 'fs';
只从模块中加载两个方法,其他值不引用,默认使用的是 ‘严格模式’
扩展:
5、link href="xxx.css" 和 @import 的区别
a. link href 是xhtml 标签, 处了 href 加载 css外, 还有 rel 、rss 、 引入网站图标 等作用。 而@import 属于css 范畴,只能加载 css.
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="rss/" />
title定义的是网页的标题,该网页打开时,title的内容会出现在浏览器选项卡的标题栏上,也是网页搜索的重点内容。
link这句话定义了本网页可以通过rss/来读取内容。
RSS(简易信息聚合,也叫聚合内容)是一种描述和同步网站内容的格式。网站提供RSS输出,有利于让用户获取网站内容的最新更新。
b. link 引入时候,可以在页面载入时候同步加载。 而@import 需要在网页全部加载后再加载。
c. link href 是xhtml 标签, 无兼容问题。 @import 是css2.1提出,低版本不兼容。
d. link 是 标签,可用通过js控制dom来修改样式。这些基于文档的,@import 不能通过dom 来插入样式。