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()