.vue中style标签里面的background问题

最近写vue多页,有个登陆弹框的背景图,打包完平白多了两层文件夹,为了这个问题真的是花费了好几天的时间,最终是用:style+require解决的,不说了,上 代码:

<div :style="backgroundDiv" class="background-img"></div>

<script>
  export default {
    data () {
      return {       
        backgroundDiv: {
          backgroundImage: 'url(' + require('../assets/images/1.jpg') + ')',
        }
      }
    }
  }
</script>

<style scoped>
  .background-img {
    background: no-repeat center top;
    background-size: contain;
    height: 150px;
  }

</style>

解决了!!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个问题可能是由于字体文件加载时还未完成,就已经开始绘制文字导致的。你可以尝试在字体文件加载完成后再进行绘制,或者在绘制之前先判断字体文件是否已经加载完成。 你可以修改代码如下: ``` let can = document.createElement('canvas'); can.width = 300; can.height = 350; var str1 = window.xyjVue.$waterStr; let cans = can.getContext('2d'); cans.rotate(-25 * Math.PI / 180); const fontSize = 16; const opacity = 0.4; // 设置字体 const font = new FontFace('CustomFont', 'url(http://hnxyjwork.kmdns.net:15002/wenYi/DIN-Light.woff)'); font.load().then(() => { document.fonts.add(font); // 添加字体 cans.fillStyle = `rgba(216, 216, 216, ${opacity})`; // 设置文本颜色和透明度 cans.font = `${fontSize}px CustomFont`; // 设置字体大小和名称 cans.fillText(str1, 0, 300); cans.fillText(str1, 0, 130); let div = document.createElement('div'); div.id = id; div.style.pointerEvents = 'none'; div.style.top = '0'; div.style.left = '0'; div.style.right = '0'; div.style.bottom = '0'; div.style.opacity = '1'; div.style.position = 'absolute'; div.style.zIndex = 7; div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat fixed'; let img = new Image(); img.src = can.toDataURL('image/png'); img.onload = function () { div.style.background = `url(${img.src}) left top repeat fixed`; if (parentName) { document.querySelector(parentName).appendChild(div); } else { document.body.appendChild(div); } }; }); ``` 这样就可以在字体加载完成后再进行绘制,确保绘制出的文字使用的是正确的字体。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值