Polymer 3.0中在app-drawer添加图片的问题求助

嘿，刚第一天学Polymer就碰到这个小坎儿太正常了，我来帮你一步步搞定它～

先解决原生<img>标签不生效的问题 #

首先，<img>标签没法显示大概率不是标签本身的问题，先从这几个方向排查：

• 路径是否正确：在Polymer组件的Shadow DOM里，图片路径是相对于当前组件的HTML文件的。比如你的组件文件在src/my-app.html，图片放在src/images/avatar.png，那路径应该写成./images/avatar.png，别用绝对路径或者错误的相对层级。
• 样式是否遮挡：检查app-drawer或者父元素有没有设置overflow: hidden、display: none这类样式，或者图片本身有没有被设置成width: 0、height: 0导致看不见。
• 基础示例测试：先写个极简的测试代码确认图片能正常加载：

<app-drawer opened>
  <!-- 替换成你自己的图片路径 -->
  <img src="./test-img.png" alt="测试图" style="width: 150px; height: 150px;">
</app-drawer>

再搞定iron-image的引入问题 #

你说iron-image只有HTML文件没法引入，大概率是搞混了Polymer版本的导入方式：

如果是Polymer 2.x及更早版本（使用HTML Imports） #

1. 先确保已经安装了iron-image：

# 用bower安装（旧版本Polymer常用的包管理）
bower install --save PolymerElements/iron-image

2. 在你的组件HTML文件顶部导入iron-image的HTML文件：

<link rel="import" href="../bower_components/iron-image/iron-image.html">

3. 然后在app-drawer里直接使用：

<app-drawer opened>
  <iron-image src="./images/avatar.png" sizing="cover" style="width: 150px; height: 150px;"></iron-image>
</app-drawer>

如果是Polymer 3.x版本（使用ES Modules） #

1. 用npm安装iron-image：

npm install --save @polymer/iron-image

2. 在你的组件JS文件（或者模块脚本里）导入对应的JS文件：

import '@polymer/iron-image/iron-image.js';

3. 之后就可以在模板里正常使用<iron-image>标签了～

小提醒 #

如果还是不行，可以先检查浏览器控制台有没有报错，比如路径404、组件未注册这类信息，这些报错往往能直接帮你定位问题。

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