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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3008 天前的主题，其中的信息可能已经有所发展或是发生改变。

这是我的配置文件

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

2016-09-23 12:49:26 +08:00

同求解决方法

Rabbit52

2016-09-23 12:54:53 +08:00

{test: /\.(jpe?g|png|gif|svg|woff|ttf|eot)$/i, loader: 'file?hash=sha512&digest=hex&name=[hash].[ext]'}

相当于把所有以上后缀的文件 hash 重命名后输出到 dist 目录

baiyi

2016-09-23 13:13:28 +08:00

@Rabbit52 感谢回复

baiyi

2016-09-23 13:15:22 +08:00

@Rabbit52 但是这个规则并不能解决我的问题我想要的是小于 limit 的图片使用 base64 方式读取 url-loader 提供了这个方法然而我这里使用了 loader: 'url?limit=10000' 这个后图片就不能显示了

baiyi

2016-09-23 13:29:30 +08:00

此贴终结

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

通过 yeome 生成后的规则自带这两条，不知道是不是版本问题会发生冲突看不到图片