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来现。




 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。