前端vue-cli项目中使用img图片和background背景图的几种方法

前端中背景图片极其常用,但是很容易出现各种问题.

一种是脚手架本身资源引用方式的问题,如指定静态资源文件夹.

一种是图片资源引入方式,有时候使用绝对或者相对路径会导致错误.

css方法

正常使用background属性即可.

如有问题,应把图片资源放入static静态资源文件夹,不是assets之类的其他文件夹.

<div class="bgImg"></div>
<style>
.bgImg{
  background-image:url("@/../static/images/logo.png")
}
</style>

import方法

使用import导入背景图片

import bgImg from "@/../static/images/logo.png"
export default {
  name: 'App',
  data () {
    return {
      bgImg: bgImg,
    }
  }
}

使用内联样式

<div :style="{backgroundImage:'url('+bgImg+')'}"></div>

require方法

使用require获取图片

export default {
  name: 'App',
  data () {
    return {
      bgImg: require("@/../static/images/logo.png"),
    }
  }
}

赋值为img的src

<img :src="bgImg" />

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli脚手架引入图片的几种方法总结

    我个人常用的方法,一直在摸索更好的方法,如果各位大佬有什么建议,可以给我评论留言哦 1.import方法 第一步:在.vue文件中import edit from 'path'(path是图片与.vue的相对路径) 第二步:在data对象中定义一个属性edits,值对应edit 第三步:在template中 给标签绑定属性 最后刷新界面看效果就可以了! 2.static方法 第一步:图片放在static文件夹,在data对象的一个里定义属性pro_img,属性值是图片与.vue的相对路径 第二步

  • vue-cli中打包图片路径错误的解决方法

    vue-cli中打包图片路径错误的解决方法

    最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法,终于给摸索出来.将项目部署到服务器上分为两种:一种是直接部署到服务器的根目录,另外一种是部署到服务器的子目录下 1.我们首先来说部署到根目录下 就是比如:www.****.com 找到项目中config文件夹下的index.js文件 将文件中的assetsPublicPath: '/',改成如下方框这样. 这样的目的是将绝对路径改成相对路径 如果放在根目录下,这样就可以了 2.放在子目录下 如

  • 详解在vue-cli3.0中自定css、js和图片的打包路径

    前言 我们有时候因为一些特殊需求,可能需要将js/css/img等资源文件都打包到根路径下,但vue-cli3.0的路径配置中仅有 assetsDir配置项能够配置所有的静态文件所在的文件夹,并不能针对css/js/img等资源文件分别来做设置,那么请看我如何尝试的吧! 分析 众所周知,vue-cli3.0使用了webpack进行打包处理,那么我们是否可以拿到目前打包默认的一些webpack配置,并在这些配置中找到一些蛛丝马迹,从而更改配置来实现对打包路径的更改呢? 好在vue-cli3.0提供

  • vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能

    前端工作中,经常需要图片裁剪的场景,cropper.js是一款优秀的前端插件,api十分丰富. 本文是在vue-cli项目下封装图片裁剪插件,效果图如下: 话不多说,看步骤吧. 第一步:准备开发环境 cropper.js是基于jquery的,所以要先安装jquery 执行命令: npm  install --save-dev jquery cropper 为webpack配置添加jquery的映射 修改webpack.base.conf.js配置,添加标红的一行 第二步:新建图片裁剪组件 ind

  • vue cli使用绝对路径引用图片问题的解决

    前言 Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释.Vue官方文档 很全面的. Vue是近两年来比较火的一个前端框架(渐进式框架吧),本文将给大家详细介绍vue cli使用绝对路径引用图片问题的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看吧. 正文: 在页面中使用绝对路径可通过在js中用 require() 引入 data (){ return { sr

  • 前端vue-cli项目中使用img图片和background背景图的几种方法

    前端中背景图片极其常用,但是很容易出现各种问题. 一种是脚手架本身资源引用方式的问题,如指定静态资源文件夹. 一种是图片资源引入方式,有时候使用绝对或者相对路径会导致错误. css方法 正常使用background属性即可. 如有问题,应把图片资源放入static静态资源文件夹,不是assets之类的其他文件夹. <div class="bgImg"></div> <style> .bgImg{ background-image:url("

  • Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)

    Vue-CLI项目-axios模块前后端交互(类似ajax提交)08.31自我总结,内容如下: Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$ro

  • Vue项目中使用better-scroll实现一个轮播图自动播放功能

    Vue项目中使用better-scroll实现一个轮播图自动播放功能

    前言 better-scroll是一个非常非常强大的第三方库 在移动端利用这个库 不仅可以实现一个非常类似原生ScrollView的效果 也可以实现一个轮播图的效果 这里就先记录一下自己实现这个效果的一些过程吧 思路 1.首先要确定自己的HTML结构 基本结构就是一个wrapper包含一个content 2.其次需要明白的一个页面可以滚动的原理在于 当内容的高度超出了容器的高度才可以实现滚动 如果没有超出 那么就没有滚动的必要 因此第一点需要实现的就是 获取到所有内容的高度 由于实现的是一个轮播

  • Vue开发项目中如何使用Font Awesome 5

    Vue开发项目中如何使用Font Awesome 5

    目录 安装依赖 配置 使用 1. 进入图标搜索页 2. 输入想使用的图标的英文,例如用户的英文是 user 3. 过滤收费图标 4.点击图标查看 5. 查看结果 总结 Font Awesome 官网:https://fontawesome.com/ 前端小伙伴们都知道Font Awesome图标库,它具有丰富的常用图标,笔者开发时也经常使用,省却了自己到处找图标的困扰,当然阿里的iconfont也不错,不过它比较杂乱,找的图标有时候不是配套的,尺寸和比例上有些偏差,即使你只使用某一个图标库的图标

  • vue cli webpack中使用sass的方法

    1:安装依赖 npm install sass-loader node-sass --save-dev 2:html中 修改style <style lang="sass"> /* write sass here */ </style> 3: 使用正常sass 语法 //但是会报错 <style lang="sass"> $highlight-color: #F90; $highlight-border: 1px solid $h

  • 详解vue在项目中使用百度地图

    详解vue在项目中使用百度地图

    第一步,去百度地图开发者申请秘钥. 第二步在项目中引入,具体如下 其中index.html存放地图链接,代码如下 然后在APP.vue里面实现,代码如下 <template> <div id="app"> <div id="allmap" ref="allmap"></div> <router-view></router-view> </div> </tem

  • vue+element项目中过滤输入框特殊字符小结

    可以在main.js中写入方法 Vue.prototype.validSe = function (value, number = 255) { value = value.replace(/[`-*~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~!@#￥%--&*()--\-+={}|<>?:""[].:'',..]/g, '').replace(/\s/g, ""); if (value.

  • 解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题

    vue +webpack 项目中数据更新后页面没有刷新问题,ie11下,如果GET请求请求相同的URL,默认会使用之前请求来的缓存数据,而不会去请求接口获取最新数据,我用的解决方法是在每个请求发送前,拦截请求并给请求接口的URL后加一个时间戳(new Date().getTime()),这样就保证了每一次请求的URL都不同,ie11就会不断的请求接口而不使用缓存数据. 代码如下 if(config.url.indexOf('?')>-1){ config.url = url + config.u

  • Vue.js项目中管理每个页面的头部标签的两种方法

    在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title 呢?下面介绍两种方法. 使用router.meta 在路由里面配置每个路由的地址: routes: [ { /* (首页)默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口' } }, {

随机推荐