data() {
return {
// 这里有别于 shouye:'url(../../assets/images/shouye/index2x.png)', XXX 这是错误写法
// 以下是正确写法 仅供参考
shouye:'url(' + require('../../assets/images/shouye/index2x.png') + ')',
fenlei:'url(' + require('../../assets/images/shouye/fenlei2x.png') + ')',
search:'url(' + require('../../assets/images/shouye/search2x.png') + ')',
shopcart:'url(' + require('../../assets/images/shouye/gouwuche2x.png') + ')',
mine:'url(' + require('../../assets/images/shouye/I2x.png') + ')'
}
}
使用require()方法，require()是node.js方法
<template>
<div class="demo">
<!-- 成功引入的四种方法： -->
<!-- 图1 -->
// <1>background 背景图片使用：calss标签中
<div class="img1"></div> //img1用的是在样式表里面的位置引入路径 往下翻↓
// 项目路经前加~@ 要注意的是 :
// 1.这里只加@是不行的 前面要加~
// 2.用../../这类的绝对路径也是不行的
<!-- 图2 -->
// <2>background 背景图片使用 行内 :style 使用
// 这里是在js中 就是<script></script>中 先引入 注意引入的时候也是项目目录下的路径 前面是@
// 然后在data里面声明'bg2' 在template 用的指令 :style url括号里面使用字符串拼接的办法 如下使用的是（'+ bg2 + '）
<div class="img2" :style="{backgroundImage: 'url(' + bg2 + ')' }"></div>
<!-- 图3 -->
// <3> <img/> 图片标签使用
// 这是img标签 不是backgriund-image 在标签上直接用 也是开头~@ 不过在这里我试了试不加~ 只用@也是可以的
<img src="~@/../static/images/logo3.png" width="100">
</div>
<!-- 图4 -->
// <4> <img />图片标签 引用使用
// 使用img标签 循环添加图片
<div class="borderimg">
<img v-for="(item, index) in borderList" :key="index" :src="item.path" alt="">
</div>
</template>
<script>
import Bg2 from '@/../static/images/logo2.png'
export default {
name: 'App',
data () {
return {
bg2: Bg2,
borderList:[
{
path:require('@/assets/imgs/dataBoard/border-leftbottom.png')
},
{
path:require('@/assets/imgs/dataBoard/border-lefttop.png')
},
{
path:require('@/assets/imgs/dataBoard/border-rightbottom.png')
},
{
path:require('@/assets/imgs/dataBoard/border-righttop.png')
},
],
}
}
}
</script>
<style>
.demo{width: 100px;margin: 50px auto;}
.img1{
width: 100px;
height: 100px;
background: url('~@/../static/images/logo1.png') center center no-repeat;
background-size: 100px auto;
}
.img2{
width: 100px;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
background-size: 100px auto;
}
.borderimg{
img {
height: 10px;
width: 10px;
}
img:nth-of-type(1){
position:absolute;
left:-1px;
bottom:-1px;
}
img:nth-of-type(2){
position:absolute;
left:-1px;
top:-1px;
}
img:nth-of-type(3){
position:absolute;
right:-1px;
bottom:-1px;
}
img:nth-of-type(4){
position:absolute;
right:-1px;
top:-1px;
}
</style>
另外 我发现写渐变的时候使用background-color是不行的 需要使用background-image 也就是说 使用background：color（渐变） url（图片路径）..... 是不生效的
如果想同时使用渐变和图片需要搭配img标签了 。
鄙人粗略理解 欢迎大神指点。
