待会儿我们可以把图片显示在这个容器里面 ..

在没有图片显示的时候，可以隐藏这个容器 … 添加一个 style 属性 … style="display:none"

保存一下，再打开 index.js ..

index.js

在获取照片成功以后要做的事情这里 … 先找到图片的容器 … document.getElementById('imagecontainer');

把它交给一个变量 … 命名为 imageContainer … var imageContainer =

下面我们去创建一个 img 元素 .. 把这个元素的 src 属性的值设置成获取到的图片的路径 …

再把这个 img 元素添加到图片容器里面 … 然后再设置图片容器的 display 属性，让它显示出来 ..

var imageEntity = document.createElement("img");
imageEntity.src = imageData;
imageContainer.appendChild(imageEntity);
imageContainer.style.display = "block";

保存一下这个文件 …

index.css

为了让图片的宽度跟包装它的容器的宽度一样 .. 可以再去添加点样式 … 打开 www 下面的 css 目录下面的 index.css

添加一个 img{width:100%} … 把 img 标签的宽度设置成 100% … 保存 ...

演示

再重新编译并且安装一下修改以后的应用 .. phonegap run --emulator ios

点击选择图片 … 在相册里，找到一张要使用的图片 … 选择 ….

回返回到应用 … 在应用的界面上 … 会直接显示出刚才选择的图片 ….