Load image path in code

Hi, in my source view of my web page I am using some images. Right now I use the code:


<img class="smallIcon" src="skins/itsoft-images/small-icon.png" alt="Small Icon" width="20px" height="20px" />

I use this image many times in my pages, as well as other images. I don’t want to use a path like this because if I ever change the location of the images, I will have to update a hundred pages.

I would like to place the path to the image in my web.config file, and have the code load from there. I’m use to doing it in PHP but I can’t figure it out in .Net.

Something like:


<img class="smallIcon" src="<%@ ICON_FILE_DIR %>" alt="Small Icon" width="20px" height="20px" />

Is that even possible?

I just tried the following from a website:


<img class="smallIcon" src="<%$ConfigurationSettings.AppSettings("small-icon-path").ToString();%>" alt="Small Icon" width="20px" height="20px" />

or


<img class="smallIcon" src="<%=ConfigurationManager.AppSettings["small-icon-path"];%>" alt="Small Icon" width="20px" height="20px" />

But I get a compile error that I need to use a literal control…

This works for me:

<img src="<%=ConfigurationSettings.AppSettings["small-icon-path"].ToString()%>" alt="Small Icon" />

I’d really like to see what you’re planning because I am a bit skeptical that this is the best choice.

I’m just having a master page with all my header and footer and sidebars on it. And then each other page will have some content. But I am using images in the other pages and I don’t want to type the path in all those pages.

Each page will have many sections that look the same. The big green dot later will be replaced with an avatar or picture, and the small green dots are, print, edit, delete buttons, etc…

But the page content is not loaded from a database it’s static on the page so I am not sure how to make it work.

This from my default.aspx page, that uses master page.


<asp:Content ID="Content2" ContentPlaceHolderID="PageContentPlaceHolder" Runat="Server">
<p class="extraLargeText">Lorem ipsum dolor sit amet</p>
<p class="largeText">Lorem ipsum</p>
<img class="smallIcon" src="<%=ConfigurationSettings.AppSettings["small-icon-path"].ToString()%>" alt="Small Icon" width="20px" height="20px" />
<img class="smallIcon" src="<%=ConfigurationSettings.AppSettings["small-icon-path"].ToString()%>" alt="Small Icon" width="20px" height="20px" />
<img class="smallIcon" src="<%=ConfigurationSettings.AppSettings["small-icon-path"].ToString()%>" alt="Small Icon" width="20px" height="20px" />
<p>
<span class="smallText">Lorem ipsum dolor sit amet</span><br />
<span class="smallText">Lorem ipsum dolor sit amet</span>
</p>
<img class="icon" src="skins/itsoft-images/large-icon.png" alt="Icon" width="64px" height="64px" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<span class="smallText">Lorem ipsum dolor sit amet</span>
<span class="rightAlignLink"><a href="#">Read More...</a></span>
</asp:Content>

The right column is from a master page, it will have links and things, the left side is going to be previews of news and articles. Many preview per page if needed.

Is it those three green dots on the top that you’re talking about? Is there always 3? It looks like a job for CSS to me.

There will always be 3 dots, but this is just a template, this dots are replaced with icons for edit print and delete.

I don’t know how to make those in CSS, and get them to stay in that same spot.

Do you know how I can modify that code I posted to use CSS? Then I could load the file path only from the CSS file, and not from every page. If I changed the path later. I would only have to update the CSS file in one spot.

Example removed.

I tried these and it worked for me, can you show your webconfig values?

Ah, so they have to be links? Well, that tosses my idea out the window. :stuck_out_tongue:

If it’s static then what are you editing?? From the look of the layout you could use a Repeater or ListView but it doesn’t make sense that it’s a static page with edit buttons.

Why not just start the path from the root of the WebApp? (begin with a forward slash)

src=“/skins/itsoft-images/small-icon.png”

The examples I found said you have to use “~/skins/itsoft-images/small-icon.png” to start from a root in ASP.Net. But when I use that, it crashes.

That will depend on your directory structure, but smth like this should do


<add key="small-icon-path" value="Images/small-icon.png"/>

I guess you are right. This was just the first template and I haven’t thought things through all the way yet. That’s why I’m trying to get this template working.

I am making a website that will have articles on it. But instead of storing the articles in a database like a lot of websites do, I was just going to make a aspx or html page for each article.

It’s just a personal website and I was having a hard time learning how to store the articles in the database. Because I wanted the articles to have formatting, with bold text in some places, and code boxes, or other formatting. I knew that I could save the article text in the database. But I don’t know how I could save html formatting in the database, that when the record was loaded would cause the page to format.

If the actual record in the database says:

<p>
<b>Article Title<b>
Omg this is some cool article
</p>
<pre>test; test; test;</pre>

If I load that record onto the page, would the browser actually format that? Or would it just show through on the page?

I don’t know where to get a fancy editor like the one this forum has, so that I can have a WYSIWYG editor, that I can type into.

Edit: See on this website that html is being shown on the page, and not rendered even though I’m sure it’s sotred in the database the same way it shows on the page.

Yes, for Server side controls and .NET objects (for example Server.MapPath()) you need the ~, but for static html elements, just use the forward slash to denote the root.