Vue项目中使用img图片和background背景图的使用方法

 

⭐️  作者：船长在船上
🚩 主页：来访地址船长在船上的博客
🔨  简介：高级前端开发工程师，专注前端开发，欢迎咨询交流，共同学习！

 

🔔  感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。  
 

 

目录

css方法

import方法

require方法

---

 

 

css方法

正常使用background属性即可，如有问题，应把图片资源放入static静态资源文件夹,不是assets之类的其他文件夹。

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

import方法

使用import导入背景图片

import imgSrc from "@/../static/images/bg.png"
export default {
    data () {
        return {
            imgSrc: imgSrc,
        }
    }
}

使用内联样式

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

require方法

使用require获取图片

export default {
    data () {
        return {
            imgSrc: require("@/../static/images/bg.png"),
        }
    }
}

赋值为img的src

<img :src="imgSrc" />

 

 

扩展：

Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。所以可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class：

<div :class="{ active: isActive }"></div>

你可以在对象中传入更多字段来动态切换多个 class。此外，:class 指令也可以与普通的 class attribute 共存。当有如下模板：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

 和如下 data：

data() {
  return {
    isActive: true,
    hasError: false
  }
}

渲染的结果为：

<div class="static active"></div>

数组语法

我们可以把一个数组传给 :class，以应用一个 class 列表：

<div :class="[activeClass, errorClass]"></div>

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

 

 如果你想根据条件切换列表中的 class，可以使用三元表达式：

<div :class="[isActive ? activeClass : '', errorClass]"></div>

绑定内联样式

对象语法：

:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div :style="styleObject"></div>

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

数组语法

:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div :style="[baseStyles, overridingStyles]"></div>