前端使用src发起请求，后端返回图片

大部分同学使用img标签的时候，src属性往往都是直接写一个图片的url地址，如 xxx.jpg 

img标签的src属性本身是可以发起get请求的，那么我们可以将一个get请求转成字符串给到src属性，然后由img发起请求，后端接收到请求后，返回给我们一张图片。

这样的话，前端 img 标签的 src 属性值看起来就不是一个常见的 .jpg 、.png等格式的图片了，而是类似下面这种：

<img class="css-1safs82" src="https://render.nike.com.cn/is/image/nikeid/?layer=0&amp;src=ir(nikeidrender/af1LowUnlockSP23_v1?obj=/s/g18&amp;color=f7faff&amp;show&amp;obj=/s/g17&amp;color=28282a&amp;show&amp;obj=/s/g19&amp;color=f3f6ff&amp;show&amp;obj=/s/g16&amp;color=a9a6ad&amp;show&amp;obj=/s/g21&amp;color=a5a4ad&amp;show&amp;obj=/s/g1/leather&amp;color=222223&amp;show&amp;obj=/s/g2/leather&amp;color=dcd9d9&amp;show&amp;obj=/s/g3/cord&amp;color=363743&amp;show&amp;obj=/s/g4/leather&amp;color=dcd9d9&amp;show&amp;obj=/s/g5/leather&amp;color=dcd9d9&amp;show&amp;obj=/s/g6/leather&amp;color=d2cdca&amp;show&amp;obj=/s/g7/leather&amp;color=222223&amp;show&amp;obj=/s/g8/leather&amp;color=dcd9d9&amp;show&amp;obj=/s/g20/merry&amp;color=a5a4ad&amp;show&amp;obj=/s/g10&amp;color=141414&amp;show&amp;obj=/s/g15&amp;color=141414&amp;show&amp;obj=/s/g9/small&amp;color=232223&amp;show&amp;obj=/s/g12&amp;color=232223&amp;show&amp;obj=/s/g24/gum&amp;show&amp;obj=/s/g11/slabelb&amp;show&amp;obj=/s/g13/button&amp;show&amp;obj=/s/g14/star&amp;color=f7faff&amp;show&amp;obj=/s/g22/duck&amp;color=f9faff&amp;show&amp;obj=/s/g25&amp;color=1f1f20&amp;show&amp;obj=/s&amp;req=object&amp;fmt=png-alpha&amp;icc=AdobeRGB)bgc=f5f5f5&amp;fmt=jpeg&amp;qlt=90&amp;posN=0,-0.1&amp;icc=AdobeRGB&amp;wid=864" alt="1">

src属性值看起来更像是一个get请求的url。

 

具体实例：

https://www.nike.com.cn/u/custom-air-force-1-low-unlocked-by-you-10001412/6696950901#Builder

点击你的设计=》专属定制查看效果