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

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

vue项目中图片选择路径位置static或assets的区别及说明的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. Swift:实例方法和类型方法

    大家对“实例方法和类型方法”的概念应该不陌生了,在objective-c中很常见。例如:1.实例方法调用的时候,必须先进行实例化一个对象,然后调用init方法。而在Swift中写法有所改变,它使用class和static关键字来标示。

  3. Swift开发必备技巧:static和class的使用

    Swift中表示“类型范围作用域”这一概念有两个不同的关键字,它们分别是static和class。但是在Swift中,这两个关键字却是不能用混的。在非class的类型上下文中,我们统一使用static来描述类型作用域。这包括在enum和struct中表述类型方法和类型属性时。static适用的场景有这些:enum的情况与这个十分类似,就不再列举了。在Swift中class、struct和enum都是可以实现protocol的。

  4. OC和Swift中的static

    在非class的类型上下文中,我们统一使用static来描述类型作用域,class关键字是专门用在class类型的上下文中的,可以用来修饰类方法以及类的计算属性。Swift1.2之后,类也可以通过static关键字拥有类型存储属性了,static相当于classfinal标识符的别名,类中的static属性拥有全局作用域和懒加载属性。

  5. swift的静态属性(方法)和java的不同

    swift在任何情况下静态属性都要加上类名做为前缀,在java中通过实例名使用静态属性是一个warning,在swift中这里是一个错误swift中的static属性===swift中的finalclass====java中的finalstaticswift多出了class属性这个概念,用来表示`可以被子类重写的static属性`,然并卵,我觉得不如直接使用static和finalstatic,少一种概念swift中子类不能覆盖父类的storedproperty,但是可以覆盖父类的computedprop

  6. JokeClient-Swift 仿写学习

    STATIC和CLASSSwift中表示“类型范围作用域”这一概念有两个不同的关键字,它们分别是static和class。在Swift中class,struct和enum都是可以实现某个protocol的。在Swift中编译器不仅不会对AnyObject实例的方法调用做出检查,甚至对于AnyObject的所有方法调用都会返回Optional的结果。摘自:ANY和ANYOBJECTSELECTOR在Swift中没有@selector了,取而代之,从Swift2.2开始我们使用#selector来从暴露给Ob

  7. Swift 学习笔记 [2] 类 结构体 枚举

    错误处理四种错误处理方法传播给调用该函数的代码funcprocesFn()throwtryprocessFn()docatch捕获do{tryexpression}catchpattern1{}catchpattern2{}将错误转成可选值funcprocessFn()throw->Int{}lettry?processFn()defer定义:defer定义的函数内,在此函数完成后,立即再次调用defer定义的代码块。无关的话学了还是要用,第一版Swift文档出来的时候,还凑热闹学了一次,现在都忘得差不多

  8. 在Swift中使用dispatch_once单例模型

    到目前为止,我已经能够得到一个非线程安全模型:在Static结构中包含单例实例应该允许单个实例与单例实例没有冲突,没有复杂的命名模式,它应该使事情相当私密。根据我对Swift的经验,有三种方法来实现支持延迟初始化和线程安全的Singleton模式。dispatch_once传统的Objective-C方法移植到Swift。

  9. Swift中的static func和class func有什么区别?

    我可以在Swift库中看到这些定义:定义为staticfunc的成员函数和定义为func类的另一个函数之间有什么区别?是简单的静态是结构和枚举的静态函数,类和协议的类?有什么其他差别,应该知道吗?在语法本身中有这种区别的理由是什么?一些其他的区别是类函数是动态分派的,可以被子类覆盖。为协议选择了类,因此不必有第三个关键字来表示静态或类。

  10. “dispatch_once_t”在Swift中不可用:使用懒惰初始化的全局变量

    }()_=myGlobal//usingmyGlobalwillinvoketheinitializationcodeonlythefirsttimeitisused.所以我想迁移这个代码.所以在迁移之前:迁移后,按照Apple的指南,代码如下所示:但是当我运行这个访问返回时,我得到以下错误Static.instance!即使Swift2中有效,该代码过于冗长.在Swift3中,Apple强制您通过关闭来使用延迟初始化:

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部