I cannot get an image to display


#1

Hi, I’m using Jekyll and created a post in the _posts folder. The post is an HTML file and saved in the “_posts” folder
I made sure that I did a Jekyll Build command and a Jekyll server command. Then I went to
http://localhost:4000/2017/08/01/bills-lindyhike.html I made sure that the jpg file is in the same folder as the HTML post file. No matter what I do, the link to the photo is always broken. What am I missing here? How do I install photos into the Jekyll Blogs?

Here is the HTML note that I tried.

Hike to Lindy Peak

–>

Does anyone out there see what I’m doing wrong?


#2

If you just put an image into the _posts folder, I really don’t know what would happen to it, my guess is that it wouldn’t do anything, jekyll is only processing html or md files that are named with the date.

Normally I would put an image into /assets/img in the root, then reference that path in the img tag like

<img src="{{site.baseurl}}/assets/img/my-image.jpg">

Though you could put the image in other places, I have read about some people trying to keep the post together with its images, but I don’t remember how they did it. My sites are not post oriented so I just pile them all into assets/img and occasionally use sub folders in there to separate certain types of images as needed.


#3

I keep getting the following messages that the jpg is not found. All I
did was create an html post within the * _post* folder and then put the
photo in the same folder.

Below is my HTML file:


#4

As @rdyar mentioned above, Jekyll by default doesn’t copy assets placed in the _posts folder… that’s why your image is missing after build.

You’ll need to place it in another folder (not something with an _ underscore). The suggestion above is a good one. Create /assets/images/ in the root of your project and place the image there.

Then in your post you can reference it with either HTML or Markdown

![image](/assets/images/your-image.jpg)

or

<img src="/assets/images/your-image.jpg" alt="">

And if you’re not hosting with GitHub Pages you can use the Jekyll Post Files plugin which allows you to organize your images alongside your posts.


#5

Hi,


#6

Don’t use underscores in your folder names. Jekyll ignores them.

Rename _assets/_images/ to assets/images and adjust the source in <img> to do the same.

Then when you run jekyll build or jekyll serve you should see your image at _site/assets/images/lindyhike.jpg.