I have HTML pages that I put inside temp folder(Outside WEB-INF directory). I have used some images inside my HTML pages. I have put those images also in temp folder and then I created my war file. When I run that in localhost, Images are not loaded into HTML pages. It shows all the contents except Images. Then I created a folder images outside WEB-INF directory, put all image files into that and created war file. But the result was same. Can anyoe tell Where I am going wrong?
What might really help is if you can share the structure of your WAR file and also a sample html snippet that shows how you are referring to those image files. The problem maybe the way you are referring to those image files.
Let me answer this question with an example
Lets assume your war structure is as follows
webapp.war
|
|---> WEB-INF
|------|
| ----> classes
|---> index.html
|---> images
|-------|
| ----> logo.gif
The way you'd refer to the image file is as follows
If you are doing this correctly and still not able to view the image files, you need to share some more details as I mentioned above.
Hope this helps.
Good luck!
Have you checked whether the .gif file is in Uppercase or Lower case(you can get this information when you make the war file from command prompt). If the "gif" is in Uppercase in the war file and you have given it as <image background="bg.gif">, then change it to <image background="bg.GIF">. I think this is the problem you are facing.
I have two suggestions for you for serving static content without modifying the war file. The first is what I would recommended.
Setup Apache as front end proxy and use Apache to serve the static content
Copy the static content into ROOT.war under directory say static and then reference the static content as "/static/logo.gif".
Related
Here is my repository on my Hugo blog:
I'd like to insert an image to a post with the following text:
However, it does not come out and it gives an error of 404 - Page not found.
What am I making wrong here?
You have a typo in the image link. You have an images directory, but reference "content/post/image/..." without the "s". That won't fix it for you though.
There are a few ways to link images.
Option 1. Put all of your images in the static/ directory. Then reference the image file with a leading slash, e.g.:
Option 2. Use sub-directories to hold the markdown file and any related resources.
create a directory post/creating-a-new-theme
move your existing markdown file into that directory, and rename it to index.md
create a subdirectory post/creating-a-new-theme/images and move your images in there
reference the image as 
More info on option 2: https://github.com/gohugoio/hugo/issues/1240#issuecomment-753077529
More options
There are more sophisticated ways to reference images using the frontmatter, as well: https://gohugo.io/content-management/page-resources/
TL;DR
Put your images in the static directory, just like below, use it in markdown like  or  if you don't want to build a post folder
If you search the hugo documentation, you can find Image Processing | Hugo
But! That's no a markdown way to insert an image. If you don't miss the Getting Stated, you will find the static Directory, which says can store images, that's it!
[static](https://gohugo.io/content-management/static-files/)
Stores all the static content: **images**, CSS, JavaScript, etc. When Hugo builds your site, all assets inside your static directory are copied over as-is. A good example of using the static folder is for verifying site ownership on Google Search Console, where you want Hugo to copy over a complete HTML file without modifying its content.
How to use it
Put your images in the static directory, just like below, use it in markdown like  or  if you don't want to build a post folder
static
└── images
├── my_post_folder
│ ├── my_image.png
└── my_image2.jpg
web page with my uploaded image here
I was trying to find the path my computer was using. I tried the basic code that
I learned in a program I'm currently in, but it didn't seem to work. The path is desktop/my-skillcrush-project/101-skillcrush-project-images/images-icons/html-icon.png
The program directed to download the zip file of the image on my computer and create a folder. With the root directory associated with the file including the image.Then to use this code. <img src="img/html-icon.png" alt="HTML icon"/ (closing tag disappears when I try to type it. Sorry, it's in my code.) and that was it. It seems too simple in my opinion. How should the files be saved so that it will show up??????
What is wrong
The problem is, in the src, you put a relative path. In HTML, a relative path is a path without a slash(/) at the beginning. So, HTML was expecting a folder called desktop in the 101-skillcrush-project-code folder which had all of the other folders and the image.
What you should do
You do not need to put the full(absolute) path for the image. You can put the relative path. That is, relative to where the index.html is located.
Solution
So, in the src of the image, you can put 101-skillcrush-project-images/image-icons/HTML Icon.png.
More Info
HTML File Paths on W3 Schools
HTML File Paths on GeeksforGeeks
It definitely is much easier if you make a clear structure for all of your html assets. That also makes it much easier to handle your paths. So for example start with a root folder - lets name it html, where you put all your html pages in. Inside html create a sub folder for e.g. for your images and css. Folder structure can look like that:
/html image path from html folder: <img src="img/html-icon.png">
|- img save "html-icon.png" here
|- css
|- js
|- fonts
|- etc
To access an image from another folder e.g. css folder, you first have to go one level up with .. and then, go into the img folder. e.g. <img src="../img/html-icon.png">
If you have your images somewhere outside your "web folder" the paths can get a pain. So just organize your assets - it is much more effective and much easier for you to find and work with it.
I am having a hard time rendering/ successfully hosting images on Github.
My github repository has the following link tree structure: michaelamay/projects/post.html
and there is an image folder with the structure: michaelamay/projects/images/
In my code i add that to the src in 3 different ways, none of which are working (see image below in line 24,25,28, and 31)
This is how the rendering looks. Just a picture icon shows.
Here is the main page of the repository.
Inside the images folder.
Does anyone have any idea why that is happening? I insert an image from a website and it renders fine but not when called locally from the folders its located.
Given that the file path of the post.html file is michaelamay/projects/_layouts/post.html. If you are trying to access michaelamay/projects/images/img_forest.jpg, the path should be given as:
<img src="../images/img_forest.jpg">
This is because the 'images' folder is not under either 'projects/_layouts' or the root of the project structure.
For more information, you can check this link.
Question: what software should I use to achieve a static site generator like described below?
I'm looking for a static blog generator, which... generates static blogs, of course :). However I need something more, like a nice set of themes to choose from, and, what is even more important, a specific way of managing assets.
When I write articles/posts/text, I create a new directory. Then inside I have a file like article.md, or article.textile. I also have files with code, and pictures, and charts etc. Everything is inside this one directory. Then I used to run a tool to convert it to html, and copy the html to a website for publishing. However there was always a problem with images. I had to copy the images somewhere e.g. to Wordpress and then change the image urls in the html. This is not the best way to do it.
I'd like to have a static blog generator, which would let me keep my normal structure: one directory per post, and keep all the images from the directory in generated structure, so I can have relative paths to the images.
I really don't like the idea to keep all articles in one global directory, and all images in another global one.
I've checked jekyll, and pelican so far, and read about couple others, but I haven't found any solution to that problem. I know that, as usually, you will have many nice ideas to check.
And of course I know that most probably this post will be "closed and not constructive", or with any other funny explanation, but maybe someone will manage to post any solution before that.
Hugo can do this. cd to empty folder of your choice, then
create the scaffolding:
hugo new site .
After that you can put your content in content, example:
content
post
alpha
index.md
1.jpg
2.jpg
bravo
index.md
1.jpg
2.jpg
Build site:
hugo
Result is generated in public folder:
public
post
alpha
index.html
1.jpg
2.jpg
bravo
index.html
1.jpg
2.jpg
Jekyll does not explicitly enforce a rule about where to put your assets like images with the exception that Jekyll will not copy files directly in a folder beginning with an underscore. Although the general practice would be to put all images in the \assets\ directory, you can put it anywhere else other than the _posts\ directory, which is what you wanted.
This is the default behavior, but there are ways to get around this:
Have your posts live outside the _posts directory
Put all your posts outside the default _posts folder along with the images (this will copy all the files without any YAML frontmatter, and preprocess all the files with the YAML frontmatter). However, any other function you can do with posts automatically in Jekyll won't work anymore. This may or may not be an issue.
Plugins
Here's a plugin (link to SO question) written specifically for making Jekyll copy files in the post directory. If you do use this you can definitely just write the following Markdown and it'll link relative to the post as it should. :
Jekyll asset path plugin is another robust plugin that does something similar, but does not keep your images in one directory, it does however link images relative to your post title though.
Jekyll asset pipeline is another another plugin that handles CSS and JS, which might be something you want to have in conjunction with plugin 1.
Do note however that the use of third party plugins is not supported with GitHub Pages site generation, meaning you will have to generate them in another branch or locally, and then pushing the static HTML files to master. This might be an issue for you if you're planning to host with GitHub Pages, else on your own server instance you're good to go.
I also want my posts to be "self contained", text content and image assets being in one single folder. I'm using Jekyll.
I have made this possible with a Pull Request on the great jekyll-picture plugin.
I can then use the simple {% picture my-image.png %} syntax to show the image in my post that is in the same folder.
Here is an example: https://github.com/nhoizey/nicolas-hoizey.com/tree/master/_posts/2015/06/19-mon-jeu-esviji-integre-a-framagames
One year after my previous answer, I have now developed a Jekyll plugin that helps keep posts assets alongside the Markdown file, it might fill your needs: https://nhoizey.github.io/jekyll_post_files/
So I've tried looking here:
http://jekyllrb.com/docs/permalinks/
and here:
Show pages under one folder in Jekyll?
But this doesn't seem to resolve my issues.
So here is the situation:
Initially, I had all my Jekyll *.html files living in the /root folder of where I am running Jekyll, this was a bit messy, as there was over 30 *.html files, but when I did this:
jekyll build
jekyll serve
I would get the site propagating to: http://0.0.0.0:4000/
I now moved all the *.html files to a folder called /html (within the project root). When running:
jekyll build
jekyll serve
My site no longer renders at: http://0.0.0.0:4000/
But it renders at: http://0.0.0.0:4000/html/
I would like to remove the /html part of the URL, but as the above 2 links show, there was no previous question related to this.
Can anybody suggest how I can remove the /html part from my URLs?
Okay, so initially your folder structure looked like this, correct?
/_layouts/default.html
/css/whatever.css
/index.html
Now to your question:
Do you want to move the HTML files and nothing else to the html subfolder?
In other words, do you want to do this?
/_layouts/default.html
/css/whatever.css
/html/index.html
If yes, read David Jaqcuel's answer.
If not, continue reading my answer :-)
Or is it just that you don't want all your source files cluttering up your root folder?
If yes, you could move everything into the html subfolder, like this:
/html/_layouts/default.html
/html/css/whatever.css
/html/index.html
Then you need to tell Jekyll that the html folder is the root folder for the site's source files.
To do so, you need to add the following line to the config file (or create the file if it doesn't exist yet):
source: html
Important: the config file needs to be in the root folder of your project, even if you move your source files into a subfolder!!
Then all your source files are in the html subfolder, but the generated site will look like this:
/_layouts/default.html
/css/whatever.css
/index.html
In other words, the URL will still be http://0.0.0.0:4000/.
If you want to see an example, you can look at the source code of my blog:
I'm doing exactly the same there, only that the folder with the source files is called src.
By default, for pages in /html, Jekyll will generate a page like /html/page.html and so on.
I think you cannot add a permalink front matter default for a folder, you'll be obliged to set a permalink for each page you put in /html.
eg : for html/page.hmtl, you'll have to set :
---
permalink: page.html
---
This is the way without plugin. Otherwise, you can do it with a Generator plugin that will take all your pages in /html and change the all the target permalink.