I have used the below code to display image on top of the page. For condition1
div1.Visible = true;
div2.Visible = false;
For condition2,
div1.Visible = false;
div2.Visible = true;
and the code in the aspx page is like this.
<div id="div1" runat="server" style="padding-left: 110px;">
<img src="~/images/Package-Summary.gif" alt="Package Summary" />
</div>
<div id="div2" runat="server" style="padding-left: 110px;">
<img src="~/images/Process-Billing.gif" alt="Process Billing" />
</div>
Here it doesnot show me the image, instead shows an error box in that part!! What might be the reason!!!
I think you need a relative path to the image:
<img src="../images/Process-Billing.gif" alt="Process Billing" />
Your images are using server-side paths, but they're not server-side controls. The divs surrounding them are server-side controls, which doesn't affect the images. Either convert the image controls to server-side or convert the paths to something the client can request (relative paths, ideally).
Actually your images are not picking the right path as you are using server path at client side. If you want to use root-relative path you should use server side Image control to assign path.
You can use an Image server control and can just change its source but I do not know what you exactly want. But on client you use relative path not root-relative path. For root-relative path you have to use server image control.
see the article
ASP.NET Web Project Paths
so it should be
<div id="div1" runat="server" style="padding-left: 110px;">
<img src="../images/Package-Summary.gif" alt="Package Summary" />
</div>
<div id="div2" runat="server" style="padding-left: 110px;">
<img src="../images/Process-Billing.gif" alt="Process Billing" />
</div>
or where ever your image directory is you can go back to your image directory by just adding another "../" before path to go back to image directory.
Related
<div className="tasklist">
<p>{props.task.task}</p>
<small>{new Date(props.task.createdAt.toString()).toDateString()}</small>
<br />
<i>Assigned By :</i>
<b>{props.task.assigned_by}</b>
<br />
<i>Assigned to :</i>
<b>{props.task.assigned_to}</b>
<br />
<i>status :</i>
<b>{props.task.status}</b>
<button onClick={showUpdateFormhandler}>
<img
onError={()=>{console.log('error occured')}}
src="edittask.png"
alt="update"
style={{ width: "20px", height: "20px" }}
/>
</button>
</div>
The same div is rendering image perfectly in listing tasks but when Iam using this div from users component it isn't loading. I have added css and image is in public folder. This is my first project in react. a task assigning app.
As you stated, that your image isn't loading when you render it from user component. The most possible reason for this could be the path of source of image. The path may be changing considering that you have Users component in a different directory.
It is not easy to predict the accurate error unless I look at entire repository but I think you most probably have the source path error.Try changing the src of the image to correct source when you're rendering it from Users Component
Also , please read minimal reproducable example
QUESTION 1: I want to use a specific url if the user is visiting the page with a specific language
<div class="homepage-footer">
<img id="imgHomepageFooter" runat="server"
usemap="#videomap" alt="Video" meta:resourcekey="imgHomepageFooter" />
<map name="videomap">
<area shape="rect" id="youtubeVideo" coords="43,0,560,56" href="http://www.youtube.com/watch?v=Q2QsjVCapjs" target="_blank" alt="Youtube Video"
/>
</map>
</div>
I need to replace href with a specific url because the for spanish peoplo the video could be in youtube, but for english in www.google.com how could I redirect the page depending on my metaresources
QUESTION 2: I am using css for this page, but if I put the css separatly I don't know how to use inside the meta:resourcekey, so I put it as a part of my page and still I don't know the combination, I need to replace the background-image with a specific resources if I am using a specific language(that is the scenario)
style type="text/css">
div.countdown-image
{
background-image: url(../images/homepage/countdown-image-ENG-2015.png);
background-repeat: no-repeat;
height: 150px;
}
</style>
<!-- Countdown -->
<div id="countdown-container">
<div class="countdown-image">
<div id="countdown-timer" class="countdown-bottom">
</div>
</div>
<input id="DeadlineDateTime" value="" runat="server" type="hidden" />
</div>
One option is to handle the request server-side changing the values of the HTML controls as you need, based on the user's language. The answer of #All Blond follows this approach.
Another option is do the same but client-side, using JavaScript (jQuery recommended). You can locate the relevant HTML objects (using the jQuery selector $) and replace / update its properties based on the user's language as you need.
If you are on C#/ASP.net side then basically you should use in your main or onInit function
string userLang = HttpContext.Request.UserLanguages.ToString();
// I would prefer do switch based on userLang but it could be as simple as:
if (userLang = "en-CA")
{
// here you can do switch for your content anyway you want to.
// including changing your assign CSS or images - as a string or InnnerHTML content
// it is depend on solution you implement in your code.
}
Values "en-CA" you can look up on Google for example for each needed language.
Does an asp.net panel can be inserted with a watermark? These panel is used for printing purposes. Another problem is that the background image in the panel is not printing, only the objects inside of it.
I think you should take a look at BackImageUrl property. And assign the path of the watermark image to it.
<asp:Panel BackImageUrl="yourimagefile.png" />
Also, the image should be given a proper opacity / alpha value so that it's transparent.
Here is one more example http://www.codeproject.com/KB/web-image/ASPImaging1.aspx from codeproject that you can do many thinks on the image, including adding watermark from image.
<asp:Panel ID="Panel1" runat="server">
<asp:Image ID="Image1" runat="server" ImageUrl="~/yourimage.png" />
<div style="margin-top: -xxx"><--change the position <div> to overlaps with the image
....
your content here
....
</div>
</asp:Panel>
I am storing images in a folder on a localhost for asp.net website.
The image is there and and the src attribute is correctly formed but the image is not displayed in img element.
can some body tell me what can be the issue or missing.. when I check the image in the url of brower it is displayed properly
localhost:xxxx/TenModified/setX/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg
This is my markup for the element
<img id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderChild_ListViewThumbs_ctrl1_ctl03_Image1" src="localhost:59657/ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg" style="border-width:1px;border-style:Solid;height:172px;width:172px;" alt="">
You don't need to include the domain and port. The following will work fine for the src:
/ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg
or the full tag:
<img id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderChild_ListViewThumbs_ctrl1_ctl03_Image1" src="/ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg" style="border-width:1px;border-style:Solid;height:172px;width:172px;" alt="" />
use this:
src="ProfileTenModified/setP..."
full code:
<img id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderChild_ListViewThumbs_ctrl1_ctl03_Image1" src="ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg" style="border-width:1px;border-style:Solid;height:172px;width:172px;" alt="" />
You should remove the "localhost:59657" from the path. You really don't need it, just be root relative. This will save you a lot of time when you launch your application not having "localhost:59657" in there and just being root relative. You won't need to change all of your paths. Same holds true for any anchors. Make those root relative too.
<img id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderChild_ListViewThumbs_ctrl1_ctl03_Image1" src="/ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg">
Try to use Prefix. Http or Https
http:// localhost:xxxx/TenModified/setX/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg
<img src="http :// domain:port/TenModified/setX/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.jpeg" />
Your link is is missing the two forward slashes in the protocol?
<img id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolderChild_ListViewThumbs_ctrl1_ctl03_Image1" src="localhost//:59657/ProfileTenModified/setP/8fd7976b-d4b0-467a-bc3e-bf2a51d60299.Jpeg" style="border-width:1px;border-style:Solid;height:172px;width:172px;" alt="" />
and also the slash for the closing of the image tag
I have the following HTML code:
<div style="background-image:url(~/Images/MyImage.jpg); width:100%; height:100%">
I'm not too familiar with HTML, but form all the articles I've seen, this should work fine. If I show the image in an asp.net image control then it shows fine. However, I want to put text on top of it. Can anyone tell me what I'm doing wrong, please?
By default, you cannot use the ~ in the paths of normal HTML elements. That would only be understood by ASP.NET, but your element is being treated as markup and simply sent to the browser without being processed by the server-side script.
You should either add an id attribute and the attribute runat="server" to your <div> so that it is recognized by ASP.NET, or else you would have to use a relative or absolute URL without the ~ in the path:
<div id="mydiv" style="background-image:url(~/Images/MyImage.jpg);" runat="server">
or
<div style="background-image:url(/Images/MyImage.jpg);">
Your div is not evaluated as a server control, thus the "~" char is not recognized as it should. Not 100% sure, but adding runat="server" should work...
<div style="background-image:url(~/Images/MyImage.jpg); width:100%; height:100%" runat="server">
In the case above whatever text you put between the <div ...> </div> would come over the background image.
Also as the runat = server tag is missing it won't even be touched by asp.net. So your url is also wrong by using ~.