如何在MVC中定义img src路径

Question

我有一个带有图片的 index.cshtml 页面：

< img id="u3430_img" src="Images/send.png">

还有一个位于 myApp/Images 文件夹中的 Images 文件夹。

如果我访问以下网址：

• http:/localhost/myApp 或者
• http:/localhost/myApp/home/

都可以正常工作。但是如果我使用：

• http:/localhost/myApp/home/index

页面会尝试在以下位置查找图片：

• http:/localhost/myApp/home/Images/send.png

那么该如何定义我的文件路径呢？

附加说明： 除了 index.cshtml 外，我还有一个 js 文件，在其中添加了悬停效果到这张图片上。但是同样存在问题，无论哪种方案都不起作用。

$('#u3430_img').hover(
        function () {                
            $(this).attr("src", "~/Images/send_hover.png");
        },
        function () {                
            $(this).attr("src", "Images/send.png");
        }
);

- Juan Carlos Oropeza

Answer 1

你可以使用~引用项目顶层的图片。

<img src="~/Images/send.png">

旧版的ASP.NET MVC需要在路径周围加上@Url.Content()，具体描述可以参考这里。

编辑：如果您想从Javascript更新路径，可以指定绝对路径或将其包装在@Url.Content()中。

$('#image').attr('src', '/Images/send.jpg');

$('#image').attr('src', '@Url.Content("~/Images/send.png")');

- mfanto

---

但是在JavaScript内部怎么办呢？我尝试通过JQuery更改src，结果得到了http://localhost/myApp/~/Images/send.png。 - Juan Carlos Oropeza

你能发布一下你的jQuery代码吗？通常如果我在css文件或其他地方指定文件，我会使用相对路径（例如：../images/send.png），如果它是在~/Content中的文件。 - mfanto

已修复JavaScript的问题并进行了更新。 - mfanto

我想我必须选择选项1。因为如果脚本在单独的JS文件中，选项2似乎无法工作。它无法识别Razor代码。 - Juan Carlos Oropeza

我认为选项1更好，因为它不会与Razor绑定。我的理解是，在MVC路径解析中通常只需尝试/、~/和../的变化，直到它起作用。 - mfanto

Answer 2

在Cshtml页面中添加~是不必要的。只需添加/Images/send.png ...它将到达根目录并遵循层次结构。

- saktiprasad swain