Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Images not displaying #322

Open
RosieBraunholtz opened this issue Jan 27, 2023 · 2 comments
Open

Images not displaying #322

RosieBraunholtz opened this issue Jan 27, 2023 · 2 comments

Comments

@RosieBraunholtz
Copy link

I can't seem to get local images to display. Images from a website are fine, but when they come from the local folder, nothing comes up.

Here is my folder layout:

  • _posts
    - post1.html
  • img
    - img1.jpg`

in post1.html I've put the line: <img src='/img/img1.jpg'>.
This is what I've researched to be correct, but I have also tried <img src='img/img1.jpg'> and <img src='../img/img1.jpg'> and neither of them work either. I have tried putting the image inside the _posts folder to see if that helps, but nothing.

However when I link from a website the image works fine, for example : <img src='https://www.nasa.gov/sites/default/files/thumbnails/image/stsci-01gfnr1kzzp67ffgv8y26kr0vw.png'> shows up with the correct image.

Not sure why it's not working and it's very frustating. I've double checked the spelling and file path a million times. Any help?

@Gorlenah
Copy link

Gorlenah commented Feb 6, 2023

Try with:

<img src="/img/img1.jpg" alt="Image Description">

Check that you follow the html rules, the error probably is the use of ' instead of "

alt tag is the description of the image, Alt Tag

To have a responsive image, add the class: class="img-fluid"

Ex:
<img class="img-fluid" src="/img/img1.jpg" alt="Image Description">

@padmaJS
Copy link

padmaJS commented Aug 14, 2023

I found out that the src is using an absolute path. But If I put and image background in the front matter, the url is relative.
What I meant is <img src="/img/img1.jpg"> for this the path is /img/img1.jpg but for the frontmatter background as /img/background.jpg, this /repositoryname/img/background.jpg relative path is used.

So until I find a better way, I am hardcoding the path i.e. /padma-is-blogging/img/myimage.jpg for every other <img> I use

I can't seem to get local images to display. Images from a website are fine, but when they come from the local folder, nothing comes up.

Here is my folder layout:

  • _posts
    • post1.html
  • img
    • img1.jpg`

in post1.html I've put the line: <img src='/img/img1.jpg'>. This is what I've researched to be correct, but I have also tried <img src='img/img1.jpg'> and <img src='../img/img1.jpg'> and neither of them work either. I have tried putting the image inside the _posts folder to see if that helps, but nothing.

However when I link from a website the image works fine, for example : <img src='https://www.nasa.gov/sites/default/files/thumbnails/image/stsci-01gfnr1kzzp67ffgv8y26kr0vw.png'> shows up with the correct image.

Not sure why it's not working and it's very frustating. I've double checked the spelling and file path a million times. Any help?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants