uni-app的image组件，本地图片未显示

问题描述

这是个巨大的坑！！如果你的子组件的图片组件<image />的图片未显示，那么就对了，可以接着往下看。

假设我的项目结构是这样的

┌─components            
│  └─child.vue
├─pages
│  ├─index
│      └─index.vue
│  
├─static         
│   └─logo.png    
├─main.js             
├─App.vue            
├─manifest.json       
└─pages.json           

组件index.vue如下

<template>
	<view>
		<child />
		<image src="../../static/logo.png"></image>
	</view>
</template>

<script>
	import Child from '../../components/child.vue'
	export default {
		components: { Child }
	}
</script>

Child.vue如下

<template>
	<view>
		<image src="../static/logo.png"></image>
	</view>
</template>

<script>
	export default {
	}
</script>

你会发现子组件里的图片不能显示，而父组件的可以显示，这是为什么呢？其实它的逻辑是先把子组件整合到父组件，之后在做路径的转换，也就是说，编译后<index />原有的那张图片的路径是/static/logo.png，而子组件里的图片的路径则是/pages/static/logo.png，所以看不到图片。这很明显是个bug呀！太坑了！

解决方法

把子组件的图片路径改成和父组件的图片一样的路径就可以了。