MVC5中的图片显示

我的系统:win7 64位中文旗舰版
开发工具:vs2015
程序类型:MVC5

我的目标是在一个页面上显示一张图片。在之前的纯html上就比较容易,直接用 <img src="images/123.jpg">就能显示了,但是现在的mvc新手,就有点不知所措了,之前搜索过如何显示,那时的情况刚好和搜索出来的情形基本一致,所以没有遇到更多问题,今天又想显示图片,但情况似乎有所改变,导致无法显示。

先说之前工程的图片显示:

图片位置: /Content/theme/default/images/
在一个form中做为背景图片显示,如下所示:

@using (Html.BeginForm("test", "test", FormMethod.Post, new { style= "background-image:url(" + @SSS.themePath + "images/mainbkg.jpg);" }))
{
    ...
}

// 注:在model文件中有如下定义:
public class SSS
{
    static public string themePath = "/Content/themes/default/";
}

这是可以正常显示这个背景图片的,生成的html中,它的style内容为:

style="background-image:url(/Content/themes/default/images/mainbkg.jpg);"

看样子,这个url()是在后台解析的,而不是把结果编码进html流。

我新的工程中,图片目录和类SSS同前面的工程一样,由于我要动态生成table,并在table中显示我的图片,所以我就在布局页面 _Layout.cshtml 中加入一个div,我把图片的目录url设置到这个div中,在我动态加载图片时,就从这个div中获取图片目录,然后再加上要显示的图片名称就行了。为了测试动态显示图片,我就直接在布局页面中又加入了一个div看是否可以正常显示图片,两个div如下所示:

<div id="ht_div_ThemePath" data-url="@SSS.themePath"></div>
<div id="themeTest">abcddd</div>

我定义了一个函数,用于获取对应的页面元素:

function Gho(eleId)
{
    var htmlObj = document.getElementById(eleId)
    return htmlObj;
}

定义获取图片目录的函数:

function GetThemePath()
{
    var ht_div_ThemePathHo = Gho("ht_div_ThemePath");
    var themePath = ht_div_ThemePathHo.dataset.url;
    return themePath;
}

这个函数用来获取第一个div ht_div_ThemePath 的图片目录参数,这样以后用起来就方便了,在布局页面的结尾处,写测试代码:

<script>
	var aImgName = GetThemePath();
	var filePath = "url(" + aImgName + "images/arrowright.png)";    // 使用这一行,可以显示图片
	//var filePath = aImgName + "images/arrowright.png";    // 使用这一行,无法显示图片
	var themeTestHo = Gho("themeTest");
	themeTestHo.style.backgroundImage = filePath;    // div的背景图片
</script>

这个试验说明,url()函数确实起到作用了。上面是显示为背景图片,下面再进行测试:

<script>
	var aImgName = GetThemePath();
	var filePath = "url(" + aImgName + "images/arrowright.png)";
	var themeTestHo = Gho("themeTest");
	themeTestHo.innerHTML = "<img src=" + filePath + ">";
</script>

在测试的div中直接显示这张图片,结果失败,页面上显示为一个无法显示图片的那个x号小图片。然后把url()去掉,如下:

<script>
	var aImgName = GetThemePath();
	var filePath = aImgName + "images/arrowright.png";
	var themeTestHo = Gho("themeTest");
	themeTestHo.innerHTML = "<img src=" + filePath + ">";
</script>

这样可以成功显示。img的src值,是否添加''都不影响结果:

<script>
	var aImgName = GetThemePath();
	var filePath = aImgName + "images/arrowright.png";
	var themeTestHo = Gho("themeTest");
	themeTestHo.innerHTML = "<img src=" + filePath + ">";      // 可以显示
	themeTestHo.innerHTML = "<img src='" + filePath + "'>";    // 可以显示
</script>

 

总结:

对于 img,直接写路径
对于background,需要调用 url()

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值