ExtJS 3.4中Box组件添加图片未渲染，请问遗漏了什么？

嘿，我来帮你梳理下这个图标不显示的问题，在ExtJS 3.4里用box组件实现图片确实得留意几个容易踩的坑，我整理了几个常见的遗漏点：

• 检查图片路径是否正确
  CSS里的../img/remove-icon.png是相对路径，得对应你的CSS文件和图片文件夹的实际位置。比如如果CSS文件放在css/main.css，而图片在img/remove-icon.png，这个路径是对的，但如果CSS在更深的目录（比如css/sub/style.css），那路径就得改成../../img/remove-icon.png。你可以直接在浏览器地址栏输入图片的绝对路径（比如http://你的域名/img/remove-icon.png），看看能不能正常打开，排除文件不存在或路径错误的问题。

• 强制覆盖默认样式
  ExtJS的box组件可能自带一些默认的背景样式，会覆盖你自定义的.icon类。可以给样式加上!important增强优先级，同时补充背景重复和位置的配置：

  .icon {
      background-image: url(../img/remove-icon.png) !important;
      background-repeat: no-repeat !important;
      background-position: center center !important;
  }
  

  这样能确保你的背景样式生效，避免图片因为重复或位置不对而“隐形”。

• 明确指定Box的元素类型
  试试给box组件加上autoEl配置，明确指定渲染为div元素，避免ExtJS默认生成的其他元素可能干扰样式：

  { 
      xtype: 'box', 
      width: 16, 
      height: 16, 
      autoEl: {
          tag: 'div',
          cls: 'icon'
      },
      listeners: { scope: this } 
  }
  

• 验证图片本身和加载状态
  检查图片文件名的大小写（Linux服务器对大小写敏感，Remove-Icon.png和remove-icon.png是两个不同文件），以及图片格式是否正常。另外打开浏览器的开发者工具，切换到Network标签，查看图片的加载状态，如果是404，那肯定是路径或文件存在问题。

• 确认Box组件的实际尺寸
  在开发者工具的Elements标签里查看box生成的元素，确认它的宽高确实是你设置的16px×16px。如果尺寸被其他样式覆盖，图片可能显示不出来。

内容的提问来源于stack exchange，提问作者user1234