Error loading images in browser

0

How about, I find a little problem when viewing the image in my browser when compiling the project, I appear as cut., and visualize the route, the iis with static content, even though it is not uploaded to the server and run in a virtual one Here is the example:

<%@  Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="app_MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>titulo</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body style="height: 79px">
    <div id="cabecera">
        <!-- si funciona-->
        <asp:Image ImageUrl="img/caballo.png" runat="server" ID="logocaballo" />
        <!-- no funciona-->
        <img src="img/caballo.png" />
    </div>
    <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                <!-- bloque default -->
            </asp:ContentPlaceHolder>
        </div>
    </form>

    <div id="footer">
        <p></p>
    </div>
</body>
</html>
    
asked by matteo 11.04.2016 в 19:20
source

2 answers

1

I bet it works on the home page but not on the other pages

The problem is that this tag <img> is included in the MasterPage in the file MasterPage.cs

When the html pages are built, that master page does not become a page but is included as a template within another page.

In this case I am sure that your pages are not at the same height as the masterpage and therefore the url is incorrect since it is real to page and not to the masterpage.

On the other hand, when you use the web forms control, asp.net knows how to correctly solve the url, something that is not possible in pure html since it does not understand masterpages.

The way I recommend you in any case is to always use the paths relative to the root of the application in one of the following two ways

asp.net version

 <asp:Image ImageUrl="~/img/caballo.png" runat="server" id="logocaballo"/>

The path "~/img/caballo.png" is converted to a path relative to the root of your application, where the symbol ~ represents the root no matter where it was deployed within the IIS

HTML version

If you do not want to use a server-side control of asp.net you can use the img directly like this:

<img src="<%: ResolveUrl("~/img/caballo.jpg") %>" />

This way you always guarantee that you are pointing to the right direction.

    
answered by 11.04.2016 в 22:04
0

If you are defining images with relative path like in this case:

   <img src="img/imagen.jpg" />

It means that within the root of your project you must have a folder /img and inside an image imagen.jpg .

You can search if there really exists the folder and the image, which should be at the same level as default.aspx

    
answered by 11.04.2016 в 21:58