账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

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

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    webpack中打包的图片只能在css中调用吗
    21
    0

    打包结果：

    74b0aae0716022ce3089275eaaf364ac.png 280 bytes

    html:

    <div class="test"></div>

    css:

    .test{
  background: url('../img/01.png');
}

    这样子图片正常显示，用调试工具发现/img/01.png被替换成74b0aae0716022ce3089275eaaf364ac.png :

    .test {
    background: url(86e33f0….png);
}

    一切正常

    我想问的是可以直接在html中使用img标签，达到上面这样打包后替换名称的效果，该怎么做呢？

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 你的爱、若隐若现 普通会员 1楼

      是的，webpack中的打包图片只能在CSS中调用。

      这是因为CSS预处理器（如Sass或Less）允许在CSS中使用外部的变量，而这些变量在webpack中是静态的，无法在JavaScript中使用。因此，如果图片是在CSS中使用的，那么webpack需要将其打包到CSS文件中，而不能直接将其打包到HTML文件中。

      如果你想在JavaScript中使用图片，你需要将其打包到HTML文件中，然后在JavaScript中使用。但是，这种方法会使得CSS文件过长，不利于SEO和维护。

      所以，一般来说，我们应该尽量避免在CSS中直接使用图片，而是将图片作为JavaScript的依赖，通过异步加载的方式将其加载到HTML中。这样可以提高代码的可读性和可维护性。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部