[英]How to I properly reference an image file from a script in an asp.net mvc project?
I have an asp.net application running on a subdirectory of my website (ie www.example.com/go/) and within a .js script file I'm trying to reference an image which is in the Images directory of my project. 我有一个asp.net应用程序在我的网站的子目录(即www.example.com/go/)上运行,并且在.js脚本文件中,我正在尝试引用我项目的Images目录中的图像。
When I use /Images/add.png
to refer to the image, I can see the image while in debug mode, but not when the application is published (when in debug mode the application just runs on logalhost:port# and not under the /go/ url path). 当我使用
/Images/add.png
来引用图像时,我可以在调试模式下看到图像,但是在发布应用程序时却看不到(当处于调试模式时,应用程序只在logalhost上运行:端口#而不是在/ go / url path)。 And when I use go/Images/add.png
to refer to the image, I can see the image on the published web application, but not while testing in debug mode. 当我使用
go/Images/add.png
来引用图像时,我可以在已发布的Web应用程序上看到图像,但在调试模式下进行测试go/Images/add.png
看不到。 What is the proper way to refer to the image resource from my script so that I can see it both in production and debug mode? 从我的脚本引用图像资源的正确方法是什么,以便我可以在生产和调试模式下看到它?
Edit 编辑
For some reason relative paths are not working. 由于某种原因,相对路径不起作用。 I've experimented with
./Images/add.png
and ../Images/add.png
. 我已经尝试过
./Images/add.png
和../Images/add.png
。
You could create a global javascript variable pointing to the image: 您可以创建指向图像的全局javascript变量:
<script type="text/javascript">
var imageUrl = '@Url.Content("~/images/add.png")';
</script>
and then inside your javascript file you could use this global variable to refer to the image location instead of hardcoding its value, which as you've already found out, doesn't work when you publish the application in a virtual directory. 然后在你的javascript文件中你可以使用这个全局变量来引用图像位置,而不是硬编码它的值,正如你已经发现的那样,当你在虚拟目录中发布应用程序时它不起作用。
Needless to say that this script should be included in the view before the script that actually uses this javascript variable. 不用说,这个脚本应该包含在实际使用这个javascript变量的脚本之前的视图中。
If your script is not seperate from your MVC views then just use var image = @Url.Content("~/Images/add.png")
in your script. 如果您的脚本与MVC视图不是分开的,那么只需在脚本中使用
var image = @Url.Content("~/Images/add.png")
。
Otherwise, either use a relative path as you know where your script files are and where your images are relative to each other: 否则,使用相对路径,因为您知道脚本文件的位置以及图像彼此相对的位置:
../Images/add.png
Or use MVC to get the relative path of the content and add it to an element that you read using the script: 或者使用MVC获取内容的相对路径并将其添加到使用脚本读取的元素中:
<div id="myDiv" data-image="@Url.Content("~/Images/add.png")"></div>
var imageUrl = document.getElementById('myDiv').attributes["data-image"].value;
Example - http://jsfiddle.net/hbBKs/1/ 示例 - http://jsfiddle.net/hbBKs/1/
You need to either reference the image from a relative path based on the script so it could be 您需要根据脚本从相对路径引用图像,以便它可以
../images/file.jpg
Or you need to include some .Net into the Javascript 或者您需要在Javascript中包含一些.Net
var image = '@Url.Content("~/uploads/file.jpg")';
the '~' symbol says to start at the root of the project (Even in that is a sub folder) '〜'符号表示从项目的根开始(即使在那是一个子文件夹)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.