脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue背景图片路径

vue背景图片路径问题及解决

 更新时间：2022年07月27日 08:32:08   作者：码林鼠  
这篇文章主要介绍了vue背景图片路径问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue背景图片路径

共三种情况：

<div class="about" :style="{backgroundImage:'url('+pic+')'}">
<div style="display: inline-block;width:36px;height: 36px;background-size: cover;background-position: center;border-radius: 50%;" :style="{backgroundImage:'url('+item.fromhead+')'}"></div>
pic:require('@/assets/bg.jpg')
<div class="about" :style="{backgroundImage:'url('+require('@/assets/bg.jpg')+')'}">
<img :src="require('@/assets/bg.jpg')">

css里面不能用require

在这里插入图片描述

上面是body的背景图片

vue避坑之背景图片路径的添加

一般来说咱们添加背景图片，直接使用语句

background: url();

然后添加路径就好，而vue新建一个项目之后，会有一个assets文件夹，里面放着原始vue logo，我一开始误以为所有的图片都是放在aasets文件夹下，然后使用命令：

background: url("../aasets/bg2.jpg");

添加路径，多次尝试，运行发现总是无法实现加载图片，然后我新建了个和src同级的文件夹static,将图片放进去，再次添加路径就可以了！

background: url("../static/bg2.jpg");

后来百度了下static和assets的区别：

使用assets下面的资源，在js中使用的话，路径要经过webpack中的file-loader编译，路径不能直接写。

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

您可能感兴趣的文章:

相关文章

  • vue-router history模式服务器端配置过程记录

    vue-router history模式服务器端配置过程记录

    vue路由有hash和history两种模式,这篇文章主要给大家介绍了关于vue-router history模式服务器端配置的相关资料,需要的朋友可以参考下
    2021-06-06
  • Vue解决element-ui消息提示$message重叠问题

    Vue解决element-ui消息提示$message重叠问题

    这篇文章主要为大家介绍了Vue解决element-ui消息提示$message重叠问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • vue3点击不同的菜单页切换局部页面实现方法

    vue3点击不同的菜单页切换局部页面实现方法

    这篇文章主要给大家介绍了关于vue3点击不同的菜单页切换局部页面实现的相关资料,文中示例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考价值,需要的朋友可以参考下
    2023-08-08
  • 安装vue-cli的简易过程

    安装vue-cli的简易过程

    安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。接下来通过本文给大家介绍安装vue-cli的简易过程，感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • 一文带你搞懂Vue3中的各种ref的使用

    一文带你搞懂Vue3中的各种ref的使用

    在 Vue3 中，有许多与响应式相关的函数，例如 toRef、toRefs、isRef、unref 等等,本文将详细介绍这些函数的用法，让我们在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题
    2023-08-08
  • 在Vue.js中使用TypeScript的方法

    在Vue.js中使用TypeScript的方法

    这篇文章主要介绍了在Vue.js中使用TypeScript的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • echarts.js 动态生成多个图表 使用vue封装组件操作

    echarts.js 动态生成多个图表 使用vue封装组件操作

    这篇文章主要介绍了echarts.js 动态生成多个图表 使用vue封装组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue 根据条件判断van-tab的显示方式

    Vue 根据条件判断van-tab的显示方式

    这篇文章主要介绍了Vue 根据条件判断van-tab的显示方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue手写<RouterLink/>组件实现demo详解

    vue手写<RouterLink/>组件实现demo详解

    这篇文章主要为大家介绍了vue手写<RouterLink/>组件实现demo详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • vue轻松实现虚拟滚动的示例代码

    vue轻松实现虚拟滚动的示例代码

    移动端网页的日常开发中,偶尔会包含一些渲染长列表的场景，本文主要介绍了vue 虚拟滚动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07

最新评论