牛骨文教育服务平台(让学习变的简单)

关于显示压缩图片

问题:

手机端图片压缩问题

我有个问题, 我的网站文章里面有图片, 我的网站主要是在手机端访问, 我希望手机端看到的是一个压缩图片, 点击之后就出现一个原始图片, 用wangEditor怎么弄?


回答:

根据编辑器的文档的要求,上传图片,服务器端要返回得到的图片的url地址,例如:http://www.abc.com/imgs/123.png

如果你要实现像你说的,得到的是一个压缩图片,点击之后再显示正常图片,那好办!(压缩图片的工作一定是在你的服务器端做的,否则下面的免谈)

例如,你上传图片之后,得到的原始图片地址为 http://www.abc.com/imgs/123.png,得到的压缩图片地址为http://www.abc.com/imgs/456.png,那么这时你可以返回 http://www.abc.com/imgs/456.png#http://www.abc.com/imgs/123.png(中间的#一定要有)

你返回了这个,前端得到这个url,显示的图片肯定是456.png,即压缩图片。这样就实现了你的第一步了。

下一步需要你自己来写js程序实现。

点击这个压缩图片的时候,你可以得到图片的src,然后用#分割,你就可以得到原始图片的url,即http://www.abc.com/imgs/123.png,现在原始图片url都得到了,具体如何显示,不就简单了吗?