vue style 标签中 background-image 空白不显示

通常我们使用 background-image 标签时， url 的值无非就以下几种：
![](https://img-blog.csdn.net/20181012193137547?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dyZWVrTXJ6eko=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
先说上面的第三种：

@/assets/media/hd.jpg

会提示文件不存在，编译报错

/assets/media/hd.jpg

不会提示报错，但是实际在开发页面不会显示图片。（对，其实就是加载不到图片吧。。。具体原因未知）

…/…/…/assets/media/hd.jpg

这种是我目前使用的，虽然相对路径在书写上比较麻烦，但是可以正确显示。也不需要像其他人博客里介绍的那样，通过data 设置一个 url 值，再通过:style="xxxx" 在 template 标签上写动态的内敛样式。

/static/media/hd.jpg

推荐这种，静态资源一般都需要存放到 static 目录下。

vue style 标签中 background-image 空白不显示相关推荐

vue 在style标签中引入js变量控制样式
START 如果希望元素的样式根据js代码去控制,常见的办法呢,是在元素的style属性绑定变量即可例如 <h3 :style="{ color: colorList[0] }&qu ...
vue项目在style标签中引入css,less,sass的方法
vue项目 style标签引入 less sass less和sass需要安装相应的依赖 package.json 中加上并再次npm install 重启项目 "less": ...
在style标签中，vue项目引入style文件，外部css文件
在style标签中,vue项目引入style文件,外部css文件一.css是什么? 二.使用步骤 1.使用style标签引入 2.在style标签内使用@import导入总结一.css是什么? ...
vue如何在style标签中使用data响应式数据？
文章目录一.面临到的需求? 二.如何在css中使用变量? 三.vue如何在style标签中使用data响应式数据? 一.面临到的需求? 首先我们知道css对应是有伪类的,如:hover, :acti ...
style标签中的几个属性
1.vue中使用css通常采用如下形式 <style lang="scss" scoped></style> 2.lang="scss" ...
在vue-cili中使用scss在组件文件.vue中的style标签中输入属性lang=“scss“报错
Module build failed: Error: Missing binding E:\newsproject\node_modules_nod 一定能解决的办法: 1在配置文件包package ...
style 标签中动态设置颜色
[需求描述] 主题颜色存在$store中,动态使得部分文字跟随主题颜色 [实现效果] (主题颜色为蓝色,文字颜色跟随主题) (主题颜色为紫色,文字颜色跟随主题) [实现方式] 1.从项目中取出获得到 ...
【vue】mint-ui中navbar下划线不显示的问题
我们首先看源码中的示例使用: POST:https://github.com/canwhite/QCVueTest/blob/master/mint-ui-master/example/pages/n ...
Vue HTML网页中数学符号未正常显示(MathJax)
第一步: 在index.html中引入mathjax // index.html <link rel="dns-prefetch&q ...