商品图片

为了能让商品图片做到自适应，需要对 img 做一下特殊处理。

在 img 上引入一段代码，来使用 lib/image ，系统自动对图片进行处理

系统会自动根据环境寻找合适的尺寸，生成新的图片地址（例如：*.160x160xz.jpg），替换掉 img 的 src 属性

示例代码：

### 取产品图片的时候，不要指定尺寸
#set($offerImg = $offer.image.getImage())

<a href="$!offer.url" target="_blank">
    <img src="$offerImg" data-img-pos='fill' data-x-type="lib/image" data-src="$offerImg" />
</a>

设定样式：

a 标签作为图片的容器，需要设置一下宽度，不然小组件无法计算当前图片环境的宽度，造成无法正常显示

a {display: block;}
img {width:100%; overflow: hidden;}

注意：

对于配置项中使用 upload 、 listshow 控件上传的图片，也可以使用这个前端小组件。

其它的图片可能不支持，尤其是

这里插入的图片不能使用 lib/image 小组件