英文:
How do I display an image in a razor view in a ASP.NET MVC project?
问题
我没有太多关于ASP.NET的经验，但我看到你在尝试在ASP.NET MVC Razor视图中的HTML网格内显示一张图片2000次，但图片没有加载成功。可能有几个原因，例如图片路径不正确或者文件不存在。你可以检查以下几点：
- 确保图片文件 "HighRes.jpg" 位于与Razor视图相同的文件夹中。
- 验证图片文件名的大小写，确保大小写匹配。
- 检查图片文件的相对路径是否正确，有时需要使用
@Url.Content("~/HighRes.jpg")来生成正确的相对路径。 - 确保没有其他代码或配置问题导致图片无法加载。
如果以上步骤都没有解决问题，可能需要进一步检查ASP.NET应用程序的配置和调试选项，以找出问题所在。
英文:
I don't have much experience with ASP.NET, I'm trying to display an image called 'HighRes.jpg' 2000 times. The image is located in the same folder as the razor view.I can't get the image to load, am I missing something? Here is the code:
@using System.Diagnostics
@model float
@{
ViewData["Title"] = "asp";
}
<head>
<link rel="stylesheet" href="~/style.css">
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(20, 1fr);
grid-gap: 10px;
}
.grid-item {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>ASP.NET</h1>
@{
Stopwatch stopwatch = Stopwatch.StartNew();
}
<div class="grid-container">
@for (int i = 0; i < 2000; i++)
{
<div class="grid-item">
<img src="~/HighRes.jpg" alt="HighRes"/>
</div>
}
</div>
@{
stopwatch.Stop();
TimeSpan elapsedTime = stopwatch.Elapsed;
double memoryUsed = (double)GC.GetTotalMemory(false) / (1024 * 1024);
}
<p>Elapsed time: @elapsedTime ms</p>
<p>Memory used: @memoryUsed MB</p>
</body>
I tried displaying an image 2000 times inside an HTML grid in an ASP.NET MVC razor view. The image is not loading and I do not know why.
答案1
得分: 1
图像应位于 wwwroot 文件夹中，并确保在 Program.cs 中调用 app.UseStaticFiles();。 参考 ASP.NET Core 中的静态文件。
英文:
The image should be inside the wwwroot folder and make sure that you call app.UseStaticFiles(); in Program.cs. Check Static files in ASP.NET Core.
答案2
得分: 0
以下是您要翻译的内容：
图像位于与剃刀视图相同的文件夹中。我无法加载图像，我漏掉了什么吗？
实际上，在这种情况下，如果您的图像位于wwwroot文件夹之外，那么 src="~/HighRes.jpg" 将无法正确加载您的图像，因为当图像位于wwwroot之外时，我们需要在 program.cs 文件中使用 StaticFiles Reference，而对于 wwwroot，则不需要。
让我们来看一下实际操作。假设您有以下目录：
因此，基于上述目录，如果您想在wwwroot之外加载图像，您应该在 program.cs 文件中编写以下代码片段：
Program.cs：
app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(builder.Environment.ContentRootPath, "ImagesOutsideRoot")),
RequestPath = "/ImagesOutsideRoot"
});
HTML：
<div class="grid-item">
<img src="~/ImagesOutsideRoot/HighRes.jpg" alt="HighRes" />
</div>
但是，如果您想从wwwroot文件夹内加载图像，在这种情况下，您只需要在 program.cs 中使用 app.UseStaticFiles(); 并使用以下 HTML：
<div class="grid-item">
<img src="~/Images/HighRes.jpg" alt="HighRes" />
</div>
注意： 由于我将图片放在 Images 文件夹中，所以我使用了 ~/Images/，但如果您只将其放在 wwwroot 中，您将写成 src="~/HighRes.jpg"
输出：
注意：
根据您的情况，它将相应地加载您的图像。有关更多详细信息和示例，请查看我们的官方文档。
英文:
> The image is located in the same folder as the razor view. I can't get
> the image to load, am I missing something?
Actually, if your image would serve out side of your wwwroot folder in that scenario src="~/HighRes.jpg" would not able to load your image accordingly because while image located out side of wwwroot we need StaticFiles Reference within program.cs file while for wwwroot it doesn't require.
Let's have a look in practice. Assume, you have following directory:
Thus, based on above directory you should write following code snippet within your program.cs file if you would like to load your image out side of wwwroot in this scenario
Program.cs:
app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(builder.Environment.ContentRootPath, "ImagesOutsideRoot")),
RequestPath = "/ImagesOutsideRoot"
});
HTML:
<div class="grid-item">
<img src="~/ImagesOutsideRoot/HighRes.jpg" alt="HighRes" />
</div>
However, if you want to load image from inside your wwwroot folder in that scenario, you would only need app.UseStaticFiles(); in program.cs and Following html:
<div class="grid-item">
<img src="~/Images/HighRes.jpg" alt="HighRes" />
</div>
Note: As I am keeping the picture inside Images folder so I use ~/Images/ but if you just keep it inside wwwroot you would write src="~/HighRes.jpg"
Output:
Note:
As per your scenario, it would then load your image accordingly. For more details and example please have a look our official document here.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论