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

[baiyi]

这是我的配置文件

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 就可以正常使用这个图片

[m939594960]

同求解决方法

[Rabbit52]

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

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

[baiyi]

@Rabbit52 感谢回复

[baiyi]

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

[baiyi]

此贴终结

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

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