`
yiminghe
  • 浏览: 1460452 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

占位符图片地址获取问题

阅读更多

起因:

 

相信用过extjs的都会首先被告知这个问题:


 

1. 空白图片问题

 

需要设置 Ext.BLANK_IMAGE_URL 为本机的 Ext空白图片地址 ,否则 如果不能联网就会界面叉了。


其实作者主要是利用了一个空白图片在各个浏览器下一致的inline-block表现( 垂直居中问题中提到过 ),然后再设置css背景来具体表现。

但是自己本地要求设置一下总是感觉很奇怪,今天试验了利用 computedStyle 的方式,终于可以摆脱这种问题:


原理:

关键在于:

css 背景图片路径相对地址设置是针对css文件本身,而不是页面地址,控制权在于css文件作者


而如果用 img 标签的话,则它的相对地址必须为页面地址,控制权在于使用者


但是如果设置了css背景图片相对地址,再利用 computedStyle 获取,则可以得到该图片的绝对地址,那么这个地址也可以用在 image 标签下了。


解决:


演示


在css文件中设置背景占位符图片的相对地址(可以绝对定位到屏幕外),页面中获取绝对地址后再设置image标签的图片src,之后那个设置背景占位图片的元素其实可以删除了。



 

分享到:
评论

相关推荐

    Go-一个很小的golang库用于占位符(placeholder)图片

    本文将详细介绍“goplaceholder”这个小巧的Golang库,它是用于生成占位符图片的实用工具,对于快速原型设计、测试或者在数据未准备好的情况下填充界面具有极大的便利性。 “goplaceholder”库的设计理念是提供一种...

    UISearchBar 修改占位符的放大镜

    例如,获取到占位符的`UITextField` 并修改其属性: ```swift if let textField = searchBar.value(forKey: "searchField") as? UITextField { textField.attributedPlaceholder = NSAttributedString(string: "请...

    mocka简单优雅的内容占位符

    1. **简洁API**:Mocka的API设计简单直观,只需几行代码就能快速生成各种类型的占位符内容,如文本、图片、列表等。 2. **自定义样式**:通过CSS,你可以轻松定制占位符的外观,包括颜色、字体、大小等,使其与项目...

    Go-一个Golanglib生成带文本的占位符图像

    本篇将重点介绍一个名为"Go-一个Golang lib生成带文本的占位符图像"的库,它专门用于创建带有自定义文本的占位符图像。 占位符图像通常在网页设计或应用开发中用来暂时替代实际图像,尤其是在开发阶段。这种图像...

    Android通过网络URL获取图片并显示

    3. **占位符和错误图**:在图片加载过程中,可以设置占位符图片,当图片加载失败时显示错误图片。 4. **图片压缩**:大尺寸的图片会占用大量内存,可能导致OOM(Out of Memory)错误。可以使用Glide的...

    android 获取网络图片

    在图片加载失败或等待时,可以设置一个默认的占位符或错误图片,提高用户体验。 总结来说,Android中获取网络图片涉及到网络请求、Bitmap解码、内存管理和用户体验优化。使用现代库如Glide和Picasso可以简化这个...

    Android获取手机所有图片并显示

    这些库可以处理图片的缓存、缩放和占位符,减少内存占用并提高用户体验。 6. **点击事件与全屏显示**: 当用户点击列表中的某张图片时,需要处理点击事件,通常使用`OnItemClickListener`。点击后,可以启动一个新...

    POI替换文本和图片,解决分割异常替换不完全的问题

    2. 使用`getDrawing()`方法获取`CTDrawing`对象,再通过`getInlinePictures()`获取`List<XWPFPicture>`。 3. 搜索并替换`XWPFPictureData`对象的数据源。 4. 更新`XWPFPicture`对象,指向新的`XWPFPictureData`。 ...

    Android-模仿微信拾取图片图片截取拍照获取图片

    常见的图片加载库有Glide、Picasso和Universal Image Loader等,它们可以处理内存缓存、磁盘缓存以及图片的缩放和占位符等问题。 6. **文件Uri权限问题**:对于Android 7.0(API level 24)及以上版本,使用`File...

    volley获取图片并缓存

    - 对于图片加载,可以利用Glide或Picasso等专门的图片加载库,它们提供了更丰富的功能,如自动缩放、占位符、错误图等。 综上所述,Volley的图片缓存机制是其高效性能的关键因素之一,通过合理利用内存和磁盘缓存...

    Java Poi流 根据Word模板插入相应的文本、表格和图片,生成新的Word报告

    - 使用`XWPFParagraph`和`XWPFRun`类,你可以找到并替换模板中的占位符文本。占位符通常是特定格式的字符串,如`{{text}}`,在程序中会被实际值所替换。 2. **插入文本**: - 在找到占位符后,可以使用`XWPFRun`...

    android安卓通过url获取网络图片并显示在imageview中

    在Android开发中,将网络上的图片...4. 可选地,设置加载错误和占位符图片。 这个简单的例子展示了如何实现基本的网络图片加载功能,实际开发中还可以根据需求进行优化和扩展,比如处理图片的尺寸、调整加载速度等。

    Android多媒体——图片资源获取的5种姿势

    以及在加载网络图片时,可以使用占位符和错误图来提升用户体验。 总之,Android平台提供了丰富的接口和工具来处理各种来源的图片资源,开发者应根据具体需求选择合适的方法,并注意性能和用户体验的优化。理解这些...

    JQ 获取图片真实宽高

    创建一个隐藏的`<img>`标签加载图片,加载完成后获取尺寸,然后替换掉原来的占位符。 通过以上介绍,我们可以了解到,使用jQuery获取图片真实宽高需要结合图片的加载事件和相应的jQuery方法。在实际应用中,考虑到...

    mzografski.brackets.satyrio-imgs:用于 Satir.io 图像占位符添加的括号扩展

    在Web开发过程中,我们常常需要使用占位符图像来预览设计效果,而Satir.io是一个广受欢迎的在线服务,提供各种风格的占位符图片。然而,手动输入Satir.io的URL来获取占位符图像可能会降低工作效率。为了解决这一问题...

    读取网络图片的五种方式

    `Glide`提供了一系列丰富的API,支持动态占位符、错误图、动画效果等。与`Picasso`相比,`Glide`在处理复杂图片加载场景时表现更优。 5. **使用`Fresco`库** `Fresco`是Facebook开发的高效图片处理库,它采用了...

    listview获取网络图片缓存优化

    4. 图片占位符:在图片加载过程中,可以显示一个占位符,让用户知道该位置是有图片的,等待加载完成。 5. 复用策略:ListView的convertView机制要求我们正确处理图片的复用。每个item的ImageView在重用时,需要清除...

    android中获取网络图片并显示以及去掉标题

    此外,为了提供良好的用户体验,我们还需要考虑错误处理,比如网络不可用时的提示,或者图片加载失败后的占位符显示。在`Glide`中,我们可以设置占位符和错误图片: ```java Glide.with(context) .load(...

    Json解析获取网络图片

    - 使用占位符或进度条提升用户体验,让用户知道图片正在加载。 - 缩略图加载策略可提高加载速度,先加载小尺寸图片,然后在用户交互时替换为原图。 综上所述,"Json解析获取网络图片"涉及到的知识点涵盖了JSON...

    users-placeholder:用于用户占位的占位符 api

    6. **异步操作**:如果API需要延迟生成占位符(例如,加载头像图片),可能会使用Promise或async/await来处理异步操作。 在"users-placeholder-master"这个压缩包中,可能包含以下内容: 1. `index.js` - API的主...

Global site tag (gtag.js) - Google Analytics