vue引入图片问题

一、img标签

<img src="~@/views/weather_radar/images/img-map-satellite.png" alt="">

二、scss文件

通过在vue文件引入scss样式文件

<style lang="scss">
@import "./scss/index.scss";
</style>

如果scss文件有引入背景图片,这里不能使用相对路径了,需要使用~开头的方式,如下:

.box {
  background: url(~@/views/system/image/login_bg.jpg) 0 0 no-repeat #297de1;
}
VUE CLI中的解释:如果 URL 以 ~ 开头,其后的任何内容都会作为一个模块请求被解析。

VUE CLI静态资源引入

不然改成以下也是可以的

<style lang="scss">
  // 使用相对路径引入静态图片是可以的
</style>

写到最后,欢迎关注作者:http://www.techshare100.com/

Image placeholder
liuy
未设置
  20人点赞

没有讨论,发表一下自己的看法吧

推荐文章
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

含光出鞘,锋利无比 | 阿里第一颗自研芯片问世,最强 AI 芯片含光800发布

阿里巴巴第一颗自研芯片正式问世。9月25日的杭州云栖大会上,达摩院院长张建锋现场展示了这款全球最强的AI芯片——含光800。在业界标准的ResNet-50测试中,含光800推理性能达到78563IPS

.vue文件怎么引入本地图片

.vue文件怎么引入本地图片.vue文件引入本地图片,需要先将本地图片复制到项目的src\assets目录中,否则不能使用。然后在template标签中,使用img标签引用图片即可。本地图片路径:在.

echarts怎么引入到vue中?

准备工作:首先我们初始化一个vue项目,执行vueinitwebpackechart。接着我们进入初始化的项目下,安装echarts,npminstallecharts-S //或 cnpminsta

axios怎么引入到vue中?

Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。在vue项目之中使用axios是一个非常明智的选择,因为vue官方已经宣称不再维护vue-resource,并且推荐使

avue和vue是什么关系?

Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,

Vue命令行工具vue-cli详解

本文将详细介绍Vue命令行工具vue-cli。概述Vue-cli是Vue官方提供的用于初始化Vue项目的脚手架工具。使用Vue-cli有以下几大优势1、Vue-cli是一套成熟的vue项目架构设计,会

vue1和vue2的区别是什么?

vue1和vue2的区别模板v2每个组件只允许有一个根元素,v1允许一个组件有多个根元素生命周期函数vue1.0周期解释init组件刚刚被创建,但Data、method等属性还没被计算出来create

vue 生成二维码插件 vue-qrcode

链接地址生成二维码安装https://www.npmjs.com/package...npm install --save qrcode.vue在组件中引入 importQrcodeVuefrom

vue源码解读(四)Vue中的异步更新策略

欢迎star我的github仓库,共同学习~目前vue源码学习系列已经更新了6篇啦~https://github.com/yisha0307/...快速跳转: Vue的双向绑定原理(已完成) 说说vu

HTML怎样引入jQuery?

HTML怎样引入jQuery?jquery的引入方式有两种,一种是本地引入,一种是引入在线jquery。相关专题推荐:《jQuery教程》方式一:本地引入(这种方法要求本地有jquery.js):我们

vue基于vant的uploader上传图片

小白第一次使用有赞的vant组件库,这里记录一下个人在项目上的一些使用,方便以后查阅. {{item.goods_title}} {{item.sku_param_value}} 愉

js中如何引入css文件以及路径问题

js中如何引入css文件以及路径问题一、在js中引入css文件的方法:1、通过document.createElement方法创建link标签;2、通过setAttribute方法设置link标签的c

css添加图片怎样找图片路径?

css添加图片怎样找图片路径?在CSS文件里,有时要用到background-image,即加一个背景图片,一般在显示标题时会经常用到。现在来看两个文件目录:/css/admin/main.css//

知道创宇杨冀龙:变被动为主动,引入黑客视角护航IOT安全

提到无锡,除了太湖的美你还能想到些什么?我想到的是物联网,作为大家公认的“物联网之城”,无锡的物联网产业发展迅猛。根据无锡市委领导介绍,无锡是目前全国唯一的国家传感网创新示范区,从2009年开始,无锡

你公司到底需不需要引入实时计算引擎?| 推荐

大数据发展至今,数据呈指数倍的增长,对实效性的要求也越来越高,于是像上面这种需求也变得越来越多了。那这些场景对应着什么业务需求呢?我们来总结下,大概如下:初看这些需求,是不是感觉很难?那么我们接下来来

为何jsx文件必须引入react

为何jsx文件必须引入react本质上来说JSX是React.createElement(component,props,...children)方法的语法糖。所以我们如果使用了JSX,我们其实就是在

如何引入react组件库

如何引入react组件库1、通过npm安装antd推荐(Node.js教程)antd是基于AntDesign设计体系的ReactUI组件库,主要用于研发企业级中后台产品。npminstall-Dant

jsp怎么引入css样式?

JSP页面引入CSS样式有三种方法,且其优先级不同。具体如下:外部样式,内嵌样式,行内样式。优先级依次增高!下面给大家具体介绍一下:1、外部样式jsp可以在link标签中使用href属性引入css文件

引入css文件不起作用?

引入css文件不起作用?按F12查看开发者工具中显示,有common.css,但是页面上的样式却没有改变,代码如下: Vue介绍 ... 解决方法:加了rel属性后就好了,rel是关联的意

js如何引入css文件?

js如何引入css文件?1、使用document.write方式输出引入css的link标签在调用文件的顶部加入下例代码 document.write(''); (注:有时你引用的文件还可能需要引用其

link标签引入css不起作用怎么办?

link标签引入css不起作用怎么办?1、使用link标签引用CSS:2、link无效的问题:●原因多数是css路径写的不正确。路径分为相对路径和绝对路径。如果是相对路径要仔细检查路径是否和文件相对应

JanusGraph索引入门及模糊查询

JanusGraph模糊查询与索引1.索引JanusGraph支持两种不同类型的索引来加快查询处理:图形索引和中心顶点索引 图形索引使从由其属性标识的顶点或边列表开始遍历的全局检索操作在大型图形上高效

ie11下不能引入外部css怎么解决?

ie11下不能引入外部css怎么解决?问题:在IE11下使用link标签引入css时,无法正常引入,直接在页面中使用style标签没问题。原因:头文件的问题。解决方法:●删除头部的●或者,将头部改成

使用 jQuery 触发 Vue 事件

时间一长老是忘记这行代码的写法,今天特地记上一笔,方便今后查阅 js文件如下document.save.dispatchEvent(newEvent('无此事件'))//触发不存在的事件不会报错 do