V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
baiyi
V2EX  ›  问与答

webpack 打包 vue 程序图片路径问题

  •  1
     
  •   baiyi · 2016-09-23 11:53:00 +08:00 · 7381 次点击
    这是一个创建于 2743 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这是我的配置文件

    webpack.config.js(通过 yeome 生成( https://github.com/birdgg/generator-vuejs))

    { test: /\.(png|jpg)$/, loader: 'file' },
    { test: /\.(png|jpg)$/, loader: 'url?limit=10000'},
    

    home.vue

    <script>
    	import gift from '../assets/images/gift.png'
        export default {
            data: function() {
                return {
                    img: gift
                }
            }
        }
    </script>
    <img :src="img" alt="">
    

    如果去掉这句

    { test: /\.(png|jpg)$/, loader: 'url?limit=10000'}
    

    然后每次使用一个新图片 先执行 npm build(webpack)命令 之后 就可以正常使用

    现在有如下几个问题:

    1.这句是做什么的 是不是把小的图片转换成 base64 ,如果不去掉的话现在图片显示不出来。

    2.能不使用 npm build(webpack) 命令 直接 npm run dev 就可以正常使用这个图片

    5 条回复    2016-09-23 13:29:30 +08:00
    m939594960
        1
    m939594960  
       2016-09-23 12:49:26 +08:00
    同求解决方法
    Rabbit52
        2
    Rabbit52  
       2016-09-23 12:54:53 +08:00   ❤️ 1
    {test: /\.(jpe?g|png|gif|svg|woff|ttf|eot)$/i, loader: 'file?hash=sha512&digest=hex&name=[hash].[ext]'}

    相当于把所有以上后缀的文件 hash 重命名后输出到 dist 目录
    baiyi
        3
    baiyi  
    OP
       2016-09-23 13:13:28 +08:00
    @Rabbit52 感谢回复
    baiyi
        4
    baiyi  
    OP
       2016-09-23 13:15:22 +08:00
    @Rabbit52 但是 这个规则并不能解决我的问题 我想要的是小于 limit 的图片使用 base64 方式读取 url-loader 提供了这个方法 然而我这里使用了 loader: 'url?limit=10000' 这个后图片就不能显示了
    baiyi
        5
    baiyi  
    OP
       2016-09-23 13:29:30 +08:00
    此贴终结

    错误原因:
    ````
    { test: /\.(png|jpg)$/, loader: 'file' },
    { test: /\.(png|jpg)$/, loader: 'url?limit=10000'},
    ````
    同时使用 2 种规则

    通过 yeome 生成后的规则自带这两条,不知道是不是版本问题 会发生冲突 看不到图片
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1785 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 16:33 · PVG 00:33 · LAX 09:33 · JFK 12:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.