美文网首页
vue显示图片的一部分

vue显示图片的一部分

作者: 秀萝卜 | 来源:发表于2021-12-30 11:53 被阅读0次

这就要使用background:url()了,具体可以看我之前的一篇文章:https://www.jianshu.com/p/337d849077c9

background:url(....)
background-position:xx xx
background-size:xx xx
background-repeat:no-repeat
但是在style中必须写成一个,否则不起作用。
所以使用简写格式:
background:url(...) no-repeat  0 0px / auto 28px
左边的0 0px是图片显示的起始位置,
右边的auto 28px的意思是,图片的高度设为28px,图片宽度根据高度等比缩放。
isHover: -1,

<div class="mydiv" @click="onService" @mouseenter="isHover=1000" @mouseleave="isHover=-1">
   <div class="myicon" v-if="'1000'==selectId || isHover=='1000'" :style="{background :'url(~@/../static/images/helpCenter/help_qie.png) no-repeat -37px 0px / auto 28px'}"></div>
   <div class="myicon" v-else :style="{background :'url(~@/../static/images/helpCenter/help_qie.png) no-repeat 0 0px / auto 28px'}"></div>
   <span class="myspan">在线咨询</span>
</div>
或者
<li class="myli" v-for="(item,index) in leftData" :key="index + '-help'" :class="item.id==selectId ? 'active-li':''">
    <div class="mydiv" @mouseenter="isHover=index" @mouseleave="isHover=-1" @click.stop="onType(item)">
        <div class="myicon" v-if="item.id==selectId || isHover==index" :style="{background :'url(' + item.icon + ') no-repeat -37px 0px / auto 28px'}"></div>
        <div class="myicon" v-else :style="{background :'url(' + item.icon + ') no-repeat 0 0px / auto 28px'}"></div>
        <span class="myspan">{{item.name}}</span>
    </div>
</li>

相关文章

  • vue显示图片的一部分

    这就要使用background:url()了,具体可以看我之前的一篇文章:https://www.jianshu....

  • 11. vue-­router路由和vuex

    11.1 vue-­router路由基本加载 小案例:在根路径下只显示图片,在/hello下即显示图片又显示hel...

  • vue 图片 显示方案

    相信有些刚入手vue的小白来说 vue 中有许多的问题 我也是刚入手vue 就简单记一记 vue图片展示的问题 v...

  • vue项目中网络图片无法显示

    开发vue时在img标签中使用src属性引用图片后图片无法正常显示,但复制链接后能显示图片 解决:在public中...

  • vue 动态加载图片路径

    在用vue-cli脚手架生成的vue项目开发中,动态加载图片本地运行没有问题,但是打包后图片无法显示,图片路径40...

  • 2020-08-08

    //显示图片一部分保证图片不被压缩 photoImageView.contentMode= UIView...

  • vue上传图片并显示

    html部分: //上传文件 //显示图片 js部分:new Vue({el: '#app',data() {re...

  • vue→显示本地图片

    1、backgroundImage路径问题(vue里面放背景图片) 来源:https://blog.csdn.ne...

  • vue动态显示图片

    如果图片直接写死在html或者css里的,webpack会处理这个图片最终的地址(会用到url-loader) 所...

  • Vue项目中动态绑定src路径

    问题1 vue项目中图片路径为变量时不能显示,如下 解决方法: 问题2 把获取到的图片放入数组中不显示 解决方法:...

网友评论

      本文标题:vue显示图片的一部分

      本文链接:https://www.haomeiwen.com/subject/ihivqrtx.html