vue图片选径位置static或assets区别

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

vue图片选径位置static或assets区别

船长在船上   2022-09-29 我要评论

vue图片选择路径位置static或assets区别

用vuecli的话默认情况下 static 中的文件不会经过 webpack 相关 loader 处理

assets里面的图片是会经过 webpack 的 loader 处理的,而 static 里面的图片是被直接复制到 dist/static 下面的。

一般是把一些小图片放在 assets 里面,这样一些小图片就可以处理成 base64 了,或者全放在 assets 下面都可以。

相同点

assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下。

不相同点

assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器

static中放置的静态资源文件就不会要走打包压缩格式化等流程,而是直接进入打包好的目录,直接上传至服务器。因为避免了压缩直接进行上传,在打包时会提高一定的效率,但是static中的资源文件由于没有进行压缩等操作,所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。所以简单点使用建议如下:

将项目中template需要的css文件js文件等都可以放置在assets中,走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中,因为这些引入的第三方文件已经经过处理,我们不再需要处理,直接上传。

vue之assets下的图片路径

<el-image :src="require('../assets/logo.png')" class="imgsign" ></el-image>

如果想要加载在assets文件下的图片,需使用require(’ …’)的形式,且须使用 :src

:src

static文件下的图片不需要。

vue无法识别require,执行一下命令即可:

npm install @types/node --save-dev

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们