我爱吃苹果

发布：2018-09-05 16:35
更新：2022-10-26 14:19
阅读：25696

uni-app image的重大BUG

分类：uni-app

问题已解决

<image class="card-img card-list2-img" src="../../../../../static/images/a.png"></image>

网络图片的话可以显示，二本地资源图片在真机版显示不了，在微信开发者没问题，求原因。路径正确

2018-09-05 16:35 负责人:无分享

25 个回复

1***@qq.com - 好人

我也出现这种情况，本地图片只有tab上能显示，其它地方均显示不出来

zhty518 - 个哈哈哈

体验差，app中无法设置高度100%，

t***@qq.com

好像我也是不能设置，勉强用其他方式代替，也获取不了组件高度，而H5上可以，和vue本身也有差别

2019-06-11 11:15

zhty518 - 个哈哈哈

第一次用踩了很多坑，完全没得兴趣用下去了

3***@qq.com

app端图片显示还是有问题，都一年了，还没解决方案么

Kkkyle

小程序显示正常，app不显示。。。摊手.jpg

Neil_HL

在你那儿，hello uniapp里的图片是否能正常显示，hello uniapp的image示例里有本地图和网络图。

我爱吃苹果 (作者)

可以显示，但我是作为组件用的。组件里image不显示

2018-09-05 17:07
Neil_HL

@353788916@qq.com:组件里写图片路径时路径为引用该组件的文件的路径，下个版本支持写绝对路径，那时就不存在此问题了

2018-09-05 17:47

我爱吃苹果 (作者)

可以显示。我是作为组件用的

我爱吃苹果 (作者)

举个例子？

我爱吃苹果 (作者)

怎么写呢？没听懂

Neil_HL

比如A页面引用了B组件，A页面里引用图片路径写的是../../static/xx.png ,那么B组件里图片路径也得写成../../xxx.png

2018-09-06 11:05
Trust

/static/xxx.png

2019-03-15 11:29

1***@qq.com - 有德于我，我必尊之

我学习中出现过这种问题，应该是引入图片的相对路径有问题，图片的相对路径不是参考你所引用文件的，而是参考你图片最终展示的页面的文件。
我反正这样是解决问题了
顺便我也想问问开发工程师：是不是这样设置的？我的解答是否正确？

如果是我这样的理解，那么这样的设置坑太多了

胖头鱼版人鱼线

遇到同样的问题，系统会自动生成响应的目录，并将图片拷贝进去，但是就是提示找不到图片文件，相对路径是正确的。

胖头鱼版人鱼线

问题解决了，确实是“引入图片的相对路径有问题，图片的相对路径不是参考你所引用文件的，而是参考你图片最终展示的页面的文件。”，比如，你在A文件引用了图片，但是确实在B文件中调用了A文件，那么图片参考的相对路径是B文件，而不是A文件。
另外，系统会自动生成目录并拷贝文件，是因为采用了<img>标签，这个标签不是uni-app的标签，应该正确使用<image>.

云中白狼

用base64 或者网络图片

DCloud_heavensoft

这里说的是image标签，不是背景图，不需要base64或网络图

2019-03-14 23:26

Trust - 少说废话

https://uniapp.dcloud.io/component/image
自定义组件里面使用 <image>时，若 src 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。例如：/static/logo.png

5***@qq.com

真的垃圾 bug一堆

5***@qq.com

直接用绝对路径就行了，哪有这么多事

我爱吃苹果 (作者)

很早之前不支持绝对路径在组件里，你可知道？

2019-10-24 15:59

2***@qq.com - 钱

真的是害人不浅啊

1***@qq.com

image标签的src，需指向当前项目中的图片资源（/static目录下）或网络图片。

绝对路径怎么写？

1***@qq.com - Eastboat

我在pages/index.vue下自定义了一个子组件 page/index/component/child.vue,
结果使用 image标签引入图片没用. 都试过

<image src="../../../static/iamges/area01.png" mode=""></image>

<image src="./static/iamges/area01.png" mode=""></image>

慢慢来

如果是h5端，可以考虑在main.js中加入一下代码：__uniConfig.router.base = './'

import Vue from 'vue'  
import App from './App'  

Vue.config.productionTip = false  

// #ifdef  H5  
__uniConfig.router.base = './' // 新增，解决h5端图片相对路径问题  
// #endif  

App.mpType = 'app'  

const app = new Vue({  
  ...App  
})  
app.$mount()