微信开发者工具怎么添加图片？从导入资源到页面显示
在微信开发者工具中添加图片，先在当前小程序项目里建立图片目录，把文件放进去，并在页面的WXML中用 image 组件引用。资源出现在左侧文件树后，保存并编译，模拟器能显示图片就说明这条链路已经打通。
微信开发者工具添加图片：先放进项目目录
打开项目后，在左侧文件树看清自己位于正确的小程序工程。点击顶部或文件树旁的新建入口，创建一个专门放图片的目录，名称可用 images、assets 或项目原有的静态资源目录。不要把不同页面的临时图片散落在页面文件夹里。集中管理logo、横幅和默认头像，替换文件时更容易核对路径。
1、建立图片目录
新建目录后先观察它是否已经出现在项目树中。来源步骤图展示了开发者工具中新建目录的入口和目录类型，可按自己的项目结构创建同样用途的图片目录。
2、选中目录并打开本机位置
右键刚建好的目录，选择【硬盘打开】。这样打开的是该目录实际对应的本机文件夹，不必猜测项目保存在哪个磁盘位置。
右键菜单中的【硬盘打开】可以直接执行。刚导入项目、还不熟悉工程路径，用这种方式定位目录最直接。
3、复制图片并确认同步
将准备好的PNG、JPG等图片复制到刚打开的文件夹中，文件名尽量只使用英文、数字、短横线或下划线，例如 home-banner.png。避免同一目录存在仅大小写不同的文件名，发布到不同环境时容易让引用路径出错。
回到开发者工具后，新增文件会显示在该目录下。文件树出现图片资源后即可写页面引用。没有显示新文件时，收起后重新展开目录，或保存项目后重新编译。
在WXML中引用本地图片
项目根目录的 images 文件夹已有图片，页面WXML可直接写：
<image class="page-banner" src="/images/home-banner.png" mode="widthFix" />src 必须与文件树中的实际目录和文件名一致。以斜杠开头的路径从项目根目录计算。图片和页面文件放在相邻目录时，也可以使用相对路径，但目录变动后要同步修改。这里的 widthFix 适合横幅和内容图：宽度跟随容器，高度按原图比例计算，不会把画面强行拉伸。
图片放在页面里之后，再在对应WXSS中控制展示范围：
.page-banner {
display: block;
width: 100%;
border-radius: 16rpx;
}左右内边距会让 width: 100% 填满父容器，而不会直接撑出屏幕。头像或固定高度的卡片图需要裁剪，应依据画面主体选择合适的 mode。保存后在模拟器里查看文字、人物或商品主体没有被截断。
动态地址和用户选择的图片要分开处理
轮播图、接口返回的封面图不适合把地址写死在WXML中，可把地址放入页面数据，并绑定给 src：
Page({
data: {
coverUrl: '/images/default-cover.png'
}
})<image src="{{coverUrl}}" mode="aspectFill" />这样接口有图片时更新 coverUrl，接口为空或加载失败时仍能回退到默认图。用户从相册或相机选择的图片则是临时文件路径：它可以用于当前页面预览，但要长期保存或供其他用户访问，仍应按业务流程上传并保存上传后的地址，不能把临时路径当作项目中的静态资源。
图片不显示时按这条顺序检查
回到文件树，核实文件确实在当前项目，名称大小写和扩展名与 src 完全一致。随后核对WXML中的目录层级。图片实际是 .jpg、代码却写成 .png，或把 images 写成 image，都会导致空白。
路径无误后重新保存并编译，打开控制台查看具体报错。模拟器和真机都无法显示静态图，先看文件本身能否打开以及是否已经纳入项目。网络图片异常则查看网络地址、访问配置和请求错误。模拟器显示正常且文件树保留资源后，用真机预览验证实际效果。
