详细问题描述
[内容]项目中使用背景图片无法编译,测试使用的官方模板,在component.vue文件的index类中加入
background-image:url('../../static/compass.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
发现也不能通过编译,控制台提示如下:
18:08:15.997 项目 'vue' 开始编译...
18:08:19.655 [提示] 如编译时间较长,请注意将本工程目录从杀毒软件、搜索索引软件的监控名单移除。
18:08:33.215 [18:08:33] [ERROR] Failed to compile with 2 errors18:08:33
18:08:33.215 [18:08:33] [ERROR] in C:/Users/Administrator/Documents/HBuilderProjects/vue/static/compass.png
18:08:33.218 Module parse failed: C:\Users\Administrator\Documents\HBuilderProjects\vue\static\compass.png Unexpected character '�' (1:0)
18:08:33.247 You may need an appropriate loader to handle this file type.
18:08:33.252 (Source code omitted for this binary file)
18:08:33.256 @ ./lib/css-var-loader.js!./~/css-loader?{"minimize":false,"sourceMap":false}!./lib/mpvue-loader/lib/style-compiler?{"vue":true,"id":"data-v-2910307d","scoped":false,"hasInlineConfig":false}!./~/px2rpx-loader?{"baseDpr":1,"rpxUnit":1}!./lib/preprocessor-loader.js?{"type":"js","context":{"APP-PLUS":true}}!./~/postcss-loader/lib?{"config":{"path":"D://搜狗高速下载//HBuilderX.0.1.46.20180810-alpha//HBuilderX//plugins//uniapp//.postcssrc.js"},"sourceMap":true}!./lib/preprocessor-loader.js?{"type":"js","context":{"APP-PLUS":true}}!./lib/mpvue-loader/lib/selector.js?type=styles&index=0!C:/Users/Administrator/Documents/HBuilderProjects/vue/pages/component/component.vue 7:11615-11650
18:08:33.257 @ ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/vue-style-loader!./lib/css-var-loader.js!./~/css-loader?{"minimize":false,"sourceMap":false}!./lib/mpvue-loader/lib/style-compiler?{"vue":true,"id":"data-v-2910307d","scoped":false,"hasInlineConfig":false}!./~/px2rpx-loader?{"baseDpr":1,"rpxUnit":1}!./lib/preprocessor-loader.js?{"type":"js","context":{"APP-PLUS":true}}!./~/postcss-loader/lib?{"config":{"path":"D://搜狗高速下载//HBuilderX.0.1.46.20180810-alpha//HBuilderX//plugins//uniapp//.postcssrc.js"},"sourceMap":true}!./lib/preprocessor-loader.js?{"type":"js","context":{"APP-PLUS":true}}!./lib/mpvue-loader/lib/selector.js?type=styles&index=0!C:/Users/Administrator/Documents/HBuilderProjects/vue/pages/component/component.vue
18:08:33.264 @ C:/Users/Administrator/Documents/HBuilderProjects/vue/pages/component/component.vue
18:08:33.269 @ C:/Users/Administrator/Documents/HBuilderProjects/vue/pages/component/component.js
18:08:33.269 [18:08:33] [ERROR] in C:/Users/Administrator/Documents/HBuilderProjects/vue/pages/component/component.vue
18:08:33.273 Module build failed: ModuleParseError: Module parse failed: C:\Users\Administrator\Documents\HBuilderProjects\vue\static\compass.png Unexpected character '�' (1:0)
18:08:33.274 You may need an appropriate loader to handle this file type.
18:08:33.278 (Source code omitted for this binary file)
18:08:33.278 at doBuild (D:\搜狗高速下载\HBuilderX.0.1.46.20180810-alpha\HBuilderX\plugins\uniapp\node_modules\webpack\lib\NormalModule.js:296:19)
18:08:33.282 at runLoaders (D:\搜狗高速下载\HBuilderX.0.1.46.20180810-alpha\HBuilderX\plugins\uniapp\node_modules\webpack\lib\NormalModule.js:206:11)
18:08:33.283 at D:\搜狗高速下载\HBuilderX.0.1.46.20180810-alpha\HBuilderX\plugins\uniapp\node_modules\loader-runner\lib\LoaderRunner.js:370:3
18:08:33.287 at iterateNormalLoaders (D:\搜狗高速下载\HBuilderX.0.1.46.20180810-alpha\HBuilderX\plugins\uniapp\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
18:08:33.287 at D:\搜狗高速下载\HBuilderX.0.1.46.20180810-alpha\HBuilderX\plugins\uniapp\node_modules\loader-runner\lib\LoaderRunner.js:202:4
18:08:33.291 at D:\搜狗高速下载\HBuilderX.0.1.46.20180810-alpha\HBuilderX\plugins\uniapp\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:70:14
18:08:33.292 at _combinedTickCallback (internal/process/next_tick.js:131:7)
18:08:33.296 at process._tickCallback (internal/process/next_tick.js:180:9)
重现步骤
[步骤]
[结果]
[期望]
运行环境
[系统版本]Windows10
[浏览器版本]
[IDE版本]0.1.46.20180810
[mui版本]
附件
[代码片段]
.index {
padding-bottom: 1px;
background-image:url('../../static/compass.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
[安装包]
联系方式
[QQ]
[电话]
1 个回复
DCloud_heavensoft
目前小程序不支持css里调用本地文件资源。不管是图片还是字体文件,都只能用网络资源或base64。
为了避免兼容性问题,目前app开发里也没有支持。
请改成网络资源吧。