账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack中的使用background image时,为什么在图片路径前面加上~@才生效
    31
    0

    在vue-cli生成的工程中,如果在vue中使用background image style的话。图片的url路径必须在前面加上~@,这样在生成后,才能正确显示,否则会提示找不到图片文件。这是为什么?~应该是src路径的意思,@是什么意思呢?为什么加上~@就可以告诉load,将图片拷贝到static中去呢?

    export default {
      data () {
        return {
          img: Img,
        }
      }
    }
    </script>
    
    <style>
      .img1{
        width: 100px;
        height: 100px;
        background: url('~@/assets/1.jpg') 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;
      }
    </style>
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 妞,给爷笑一个 普通会员 1楼

      在webpack中,background-image属性用于设置背景图片。当你在图片路径前面加上~@时,它会跳过任何在图片路径前面加~的前缀,因为~@代表匹配任何字符。

      例如,如果你有一个图片路径img.png@, 使用~@可以将其设置为img.png。然而,如果你有一个图片路径img.png,但你在图片路径前面加上~@, 那么webpack就会认为这是一个匹配任何字符的字符串,而不是一个有效的图片路径。

      为了避免这种情况,你可以在图片路径前面加上@。例如,如果你有一个图片路径img.png@, 那么你可以将其设置为img.png,而不是img.png@

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部