SAP Fiori Elements 应用里图片字段(Image)的显示原理介绍试读版

很多朋友向我反映，学习了 一段时间的 SAP Fiori Elements 开发，但是感觉整套体系对于自己来说还是个黑盒子，很多技术点，看了 SAP 官方帮助文档后，觉得自己懂了，但是一旦需要自己动手做一些东西出来时，又觉得一片茫然。

其实笔者自己也经历过这个过程。究其原因，还是大家对 Fiori Elements 一些技术细节没有理解，对 SAP 官方的知识点仅仅停留在记忆，甚至是死记硬背上面。

不过没有关系，本教程笔者会刻意设置一些练习，让大家动手，在实战中逐渐熟悉 Fiori Elements 这套庞大的技术体系。

我们承接本教程之前学习到的知识，进入 Fiori-Elements-Tutorials 这个文件夹的 05-jerryfiorielement-05 这个子文件夹内，运行命令行 npm run start-local, 启动 Fiori Elements 应用：

看到 Image 这一列显示的是产品的图片信息，因为我们没有通过命令行 npm run start 启动，所以没有连接 ES5 的真实业务数据，现在看到的数据都是 npm run start-local 运行时动态生成的测试数据，所以 Image 这一列并没有显示真实的各种产品图片。

本文我们的任务就是，搞清楚这一列，为什么显示的方式和其他列不一样？这一列显示的是图片内容，这种特殊的显示方式，到底是 Fiori Elements 应用什么地方实现的？

下面是详细的研究步骤。