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



 

posted @   Insus.NET  阅读(33)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 10亿数据,如何做迁移?
· 推荐几款开源且免费的 .NET MAUI 组件库
· c# 半导体/led行业 晶圆片WaferMap实现 map图实现入门篇
历史上的今天:
2017-12-04 几种方法找到整型阵列中的最大值和最小值
2014-12-04 重构if...else...或者switch程序块
2008-12-04 Windows2003 Server升级至SP2后,水晶报表导出EXCEL出错
点击右上角即可分享
微信分享提示