I have a SPA made with Handlebars, the templates are file ending with html extension. I want to run the app on localhost, and replace the url in src attribute with "localhost". It's easy to do in the Js files, but how to do it in html files?
<img alt="header contact" border="0" align="top" src="http://example.com/app/email_tmpl/img/header-contact.jpg">
Related
I am trying to load a help page in a new popup window as shown in the code below:
<a href="#" onclick="window.open('/abc.htm', null,'width=500px,height=600px,scrollbars=yes,resizable=yes');" >
<img src="/images/icons/xyz.gif" valign="middle" border="0"/>
</a>
My application is a J2EE web application deployed on Tomcat 8. The web pages for the help files are HTML files present in the root directory in the webapps folder in Tomcat. The stylesheets and JavaScripts are stored in sub folders in the root directory.
My issue is that when the help page is loaded none of the styles are applied to it. However if I am loading the help file by double clicking on it then all the styles are applied. Only when it is loaded through Tomcat I am having this issue.
The chrome console is showing the below warning:
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/Skins/Default/Stylesheets/Styles.css".
Can somebody please explain what am I doing wrong here?
I had a <!DOCTYPE html> at the top of my page. I removed that and it worked!!
My img tag is :
<img style="position:absolute; ....."
src="http://localhost/RESSOURCES/albums/.../CePetitAlbum.png"/>
'RESOURCES' is at the same level as client, public, server
No error, but no picture, And yet the image is in the specified directory.
Anyone with an idea to solve my problem?
You should use the /public directory.
Take a look at the docs
All files inside a top-level directory called public/ are served as-is to the client. When referencing these assets, do not include public/ in the URL, write the URL as if they were all in the top level. For example, reference public/bg.png as <img src='/bg.png' />. This is the best place for favicon.ico, robots.txt, and similar files.
source: Meteor Docs
Just started working with Spring Boot MVC. Been scratching my head trying to organize my folders.
I have my index.html, CSS, and image files in following folders:
/resources/static,
/resources/static/css and
/resources/static/images respectively.
Everything works fine. I have an HTML file in /resources/templates/greeting.html and it is correctly accessed by my controller class. However, I created some subfolders, /resources/templates/management/*.html but my /resource/templates/greeting.html cannot href the folders and I get a 404 error.
If I take the files out of /management and put them in /resources they are accessed fine. Here is my index.html code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>AVI Administrator</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="\css\indexstyles.css" />
</head>
<body>
<div id="pagewrap">
<div class="header">
<img src="\images\avi.png" alt="AVI" style="width:90px;height:50px;" >
<h1> Edge Administrative Dashboard </h1>
</div>
<section id="content">
<center>
<img src="\images\wrench_1024.png" alt="Administration" style="width:200px;height:200px;" >
<h2>Account Management</h2>
</center>
<br>
<a href="\management\addadministrator.html" style="text-decoration: none" >> Add/Edit System Administrator Account<p/></a>
<a href="\management\addclient.html" style="text-decoration: none" >> Add/Edit Tenant Client Account<p/></a>
<a href="\management\addtenant.html" style="text-decoration: none" >> Add/Edit Tenant Account<p/></a>
<a href="\management\addtenantedgedevice.html" style="text-decoration: none" >> Add/Edit Edge Device<p/></a>
<a href="\management\addtenantsubscription.html" style="text-decoration: none" >> Add/Edit Tenant Subscription<p/></a>
</section>
<footer>
</footer>
</div>
</body>
</html>
Anyone have an idea what is going on? I am creating an executable JAR and have read about some of the file limitations of WEB-INF. Does Spring Boot required all HTML files to be in /resources folder?
I don't seem to be violating the spring-boot MVC jar issues. Is there a better way of organizing the folders to keep the files a little better organized? Recommendations are welcome.
Your reference is wrong.
Change it to:
<a href="management/addadministrator.html" style="text-decoration: none" >> Add/Edit System Administrator Account<p/></a>
<a href="management/addclient.html" style="text-decoration: none" >> Add/Edit Tenant Client Account<p/></a>
Ok after a lot of reading I finally found out the problem. The first thing that caused a lot of problems was the use of Spring Boot MVC and creating an executable Jar. When you create a "Spring Boot Starter Project" 2 paths are created,
resources
|
--> static
|
--> templates
By default, when using an executable jar all static content -- css, js, fonts -- is placed in the static folder. If an index.html is used it also is placed in the static file. Again, by default, all other html files are placed in the template folder. By following these default standards it works fine. An issue that really caused me to waste a lot of effort was creating an executable .jar and using the typical MVC file structure webapp --> WEB-INF. An executable jar ignores the webapp file structure. Another little surprise is that .jsp's really don't work well with Spring Boot MVC when an executable .jar is created. Almost all of these problems are eliminated with a WAR deployment. Spring Boot recommends thymeleaf or html for the view pages when using executable .jars.
Any other things I might if missed?
In my razor style helper class (located in the App_Code folder, I've got this line of code:
<img src="../../Content/images/ajax_activity.gif" alt="loading"/>
This works fine in Cassini, but when I deploy the app to IIS (virtual directory), IIS can't find the path. The virtual path is being ignored.
This also doesn't work:
<img src="#Href("~/Content/images/ajax_activity.gif")" alt="loading" />
Try this:
<img src="#Url.Content("~/Content/images/ajax_activity.gif")" alt="loading" />
OK, solved it, though I'm not really sure why it's working. After trying all the following combinations without success:
<img src="../Content/images/ajax_activity.gif" alt="loading"/>
<img src="/Content/images/ajax_activity.gif" alt="loading"/>
<img src="~/Content/images/ajax_activity.gif" alt="loading"/>
<img src="Content/images/ajax_activity.gif" alt="loading"/>
the following finally worked as expected
<img src="./Content/images/ajax_activity.gif" alt="loading"/>
It returned the image path correctly with the virtual directory set. Anyone able to explain this?
You could use #Url.Content method to convert virtual relative path to absolute application path like this:
<img src=#Url.Content("~/images/picture.png") alt="picture description">
It'll be converted in this HTML code forwarded to client:
<img src="/appname/images/picture.png" alt="picture description">
UPDATE:
In other hand you could convert image to base64 and it will be displayed correctly too:
<img src="data:image/png;base64,iVBORw0KG...SuQmCC" alt="picture description">
When you deploy in a virtual directory in IIS, the app root may be different from what you had in your dev environment.
If your app url si something like
http://localhost/MyWebApp/
ASP.NET will consider the root is "localhost", when it should be "MyWebApp".
To solve this, you have to convert the virtual directory to an application : in IIS Manager, find your directory, right clic on it, and then "Convert to application".
I know this is an old post but the information I needed was here.
For me the missing part was "When Published". So for any future developers looking for how to work with web config transformations, the process I follow is:
Add a transformation file for each project configuration (i.e. deployment)
Add the environment specific elements (don't forget the xdt attributes)
Modify the Web.config for your local development.
When the project is published, the transformation will occur.
I have an MVC web application, the urls like following in my views\ folder:
<img src="../../Images/Delete.png"/>
are working on my localhost, but when I deployed the application on production server, they stopped working and when I use single ".." instead of double "../.." , they start working on production server.
Why is this happening ?
This is happening because you probably have a virtual directory in production server and not on localhost. So always use URL helpers when dealing with urls and never hardcode them as you did in your example:
<img src="<%= Url.Content("~/Images/Delete.png") %>" />
You could use relative paths only inside CSS files (for background images for example). Inside CSS files paths are relative to the location of the CSS, but the inclusion of the CSS itself should be done using helpers of course:
<link href="<%= Url.Content("~/Content/Site.css") %>" rel="stylesheet" type="text/css" />
The relative path to the images directory must be different on the production server.
You need to make sure that on your development server the directory layout is the same as on the production server.