MVC Angularjs Vue Javascript 显示图片

以前写随笔，均是一篇一篇来分享，这篇现算是集结。在MVC，angularjs，Vue.js或者Javascript显示用户上传的图片。
本月份以来，Insus.NET有写过，
C# mvc +axios + web api + javascript https://www.cnblogs.com/insus/p/18577591

asp.net mvc视图传递数据至另一页的视图 https://www.cnblogs.com/insus/p/18578261

C# mvc +angular+ $http+ web api + javascript https://www.cnblogs.com/insus/p/18578361

C# mvc +vue+ axios+ api + javascript https://www.cnblogs.com/insus/p/18578720

C# + html + fetch + API + javascript https://www.cnblogs.com/insus/p/18579193

fetch call web api upload or update picture https://www.cnblogs.com/insus/p/18581558

不管使用任何语言，方法大同小异啦。
先来看看MVC的图片在控制器中，创建3个ActionResult,即是3个页面视图。

 

重点部分，截图中标注。以下视图代码示例，部分需要说明的，看标注啦。

这是MVC视图，直接页面写代码来实现表格列转折，如在angularjs或者vue.js实现表格列转折，还是有点难度。
另外#36和#43代码完全相同，可以把它重构，放在一个部分视图中，不过，你需要从视图传参至部分视图中。这点可以在本博客中找到...
下面是angularjs和vue.js显示图片，这2个，分别各有2种方法实现。

Web API:

 

angularjs视图，

 

其相关js代码，

 

vue视图，

其相关js code,

懂得与了解语法，js 代码差不多一样。
图片呈现算是完成了。

好了，再来说说另外的方法，即是图片呈现至表格，完全在js代码中动态生成。这样子可表格列折行显示。

 把上面这个js引入视图中去。

视图中，移除红框代码，因为图片生成由js动态生成了。

 

在js中，修改一些代码，

 

最后是改vue视图与其js代码，

其js文档，

 

好了，全部要说的，均已经分享......

看看效果，
表格呈现，每行5张图片，

 

下面是直接呈现于一行，

 

问题所想，图片很多的话，显示成一行，不是办法，只有折行或者使用div来现。