美文网首页
vue动态拼接图片路径

vue动态拼接图片路径

作者: 鹿简luz | 来源:发表于2021-06-09 15:35 被阅读0次

线上服务器地址

方法1,行内:
<view class="imgbox" :style="{ 'background-image': 'url(' + bgImg + ')' }"></view>
data() {
     return {
         bgImg: this.$u.http.config.imageUrl + '/workbg.png',
    }
}
<style>
  .imgbox{
    width:100px;
    height:100px;
    background-size: 100% 100%;
  }
</style>
方法2,样式内:
<view class="imgbox"></view>
$url: 'http://xianshangdizhi';//scss文件内定义通用字段
<style>
  .imgbox{
    width:100px;
    height:100px;
    background: url( $url + '/workbg.png') no-repeat;
    background-size: 100% 100%;
  }
</style>
//或者直接干脆将地址写死 background: url('http://xianshangdizhi/workbg.png') no-repeat;

相关文章

  • vue动态拼接图片路径

    线上服务器地址 方法1,行内: 方法2,样式内:

  • 2020-07-16

    VUE背景图片路径拼接 importbaseUrlfrom'../../baseUrl' exportdefaul...

  • 动态图片路径拼接:

    在实际项目过程中会根据后台返回的type类型对应不同的图片,这时候就需要拼接字符串

  • uniapp之动态绑定class和style样式(vue.js)

    (1) 动态class样式 (2) 图片动态资源:srceg1:后台返回图片的相对路径,需拼接完整的网络地址 eg...

  • vue 动态加载图片路径

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

  • vue动态定义图片路径

    最近在使用vue动态设置图片路径的时候遇到了一些问题,特此整理。 我想实现的效果:点击图片,弹出系统图片选择框,选...

  • vue动态定义图片路径

    背景   当我在html模块或者css中引入图片的时候用相对路径,例:   这时候图片可以正常显示,但是我想把图片...

  • Vue开发中的实用技巧

    动态导入本地图片 假设我们有这么一个功能,后台返回图片的名称,前端需要自己拼接路径获取本地图片,假定这些资源是存在...

  • VUE背景图片路径拼接

    export default {name: "Carousel",data() {return{imgList :...

  • 21.Vue img图片路径处理

    在Vue中开发,展示图片是经常使用到的,如果数据是从后台返回的,需要动态绑定到img的src中,在vue中直接拼接...

网友评论

      本文标题:vue动态拼接图片路径

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