脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 接口请求地址前缀本地开发和线上开发设置方式

    vue 接口请求地址前缀本地开发和线上开发设置方式

    这篇文章主要介绍了vue 接口请求地址前缀本地开发和线上开发设置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue-router 导航钩子的具体使用方法

    vue-router 导航钩子的具体使用方法

    本篇文章主要介绍了vue-router 导航钩子的具体使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 动态Axios的配置步骤详解

    动态Axios的配置步骤详解

    这篇文章主要给大家分享介绍了关于动态Axios的配置步骤，文中通过示例代码介绍的非常详细，通过这个教程大家可以很方便的实现动态Axios的配置，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
    2018-01-01
  • Vue3响应式高阶用法之shallowReadonly()使用

    Vue3响应式高阶用法之shallowReadonly()使用

    在前端开发中,Vue3的shallowReadonly() API允许开发者创建部分只读的状态,这对于保持顶层属性不变而内部属性可变的场景非常有用,本文将详细介绍 shallowReadonly() 的使用方法及其应用场景,具有一定的参考价值,感兴趣的可以了解一下
    2024-09-09
  • webpack搭建vue环境时报错异常解决

    webpack搭建vue环境时报错异常解决

    这篇文章主要介绍了webpack搭建vue环境时报错异常解决,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • Vue新一代状态管理工具Pinia的具体使用

    Vue新一代状态管理工具Pinia的具体使用

    本文主要介绍了Vue新一代状态管理工具Pinia的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • Vue利用Web Speech API实现文字朗读功能

    Vue利用Web Speech API实现文字朗读功能

    在 Vue 页面中实现文字朗读（Text-to-Speech,TTS）可以通过浏览器的 Web Speech API 实现,下面小编就来和大家简单讲讲具体实现步骤吧
    2025-02-02
  • Vue自定义render统一项目组弹框功能

    Vue自定义render统一项目组弹框功能

    这篇文章主要介绍了Vue自定义render统一项目组弹框功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-06-06
  • vue select 获取value和lable操作

    vue select 获取value和lable操作

    这篇文章主要介绍了vue select 获取value和lable操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • element表格el-table实现虚拟滚动解决卡顿问题

    element表格el-table实现虚拟滚动解决卡顿问题

    当页面数据过多,前端渲染大量的DOM时,会造成页面卡死问题,本文主要介绍了element表格el-table实现虚拟滚动解决卡顿问题,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10

最新评论