I have made a sample frontend simple React App for displaying Movie Names Available on Internet By searching your preferred movie Name. It uses the ImDb API to get perfect results. Initially it runs on the local host and display the correct output that I want, but after uploading the File to github and connecting it to Github Pages, it just displays WHite Display.
1.I made the initial App using node "create-react-app" command.
2.Then edited and coded the files I needed changes in.
3.After testing it for local host working correctly, Ran the command "npm build run"
4.Uploaded the build Files in the Github Repo "https://github.com/AryamanAdivyaSingh47/movie-display.github.io".
5.Did the Github Pages thingy and got Website url "URL"URL
And I get the Blank Page .
Please Help
I have my JPG image on the same repo as the index.html. Inside the html I have the exact link for the JPG (which I just went to the image on the repo and got the link),and you can open the image in a new page. But for some reason when i load the page it won't appear.
1)I have checked and its not a case sensitivity problem since I can open the image from the code
This is the link I included in my html (i changed it a bit so it won't go directly to the image in the repo for this post)
src="https://github.com/george/Link-tree/blob/master/personal_photo.jpg"
So I went to the image in Git hub and copy pasted the link.
Does the JPG need to be moved to another folder?
The blob link doesn't reference an image resource.
Try https://raw.githubusercontent.com/george/Link-tree/master/personal_photo.jpg instead.
I'm trying to display an image on my readme.md file on my git repo. I've done this before in my other repos, but for some reason this doesn't work this time.
Currently my code produces the following in the readme file:
I tried:
![Model](path_to_img.pdf)
Which just makes the link open the folder where the image is and show it
I also tried
![Model](link_address_to_image)
Which does the same thing.
I also tried
![Model](path_to_img.pdf?raw=true)
Which makes the link download the image
That display means you aren't linking to the file path. Unfortunately github is really finicky about how it loads images in readme's and you have to use their domain specifically for serving static content. If your image is part of your repo you need to access the file via the raw.githubusercontent.com subdomain specifically the pattern is https://raw.githubusercontent.com/<username>/<repo name>/<branch>/<path to file>.
For example on this project since the homepage image is in ./.github/logo.png and on the master branch of https://github.com/Descent098/ezcv I had to do:
![ezcv logo](https://raw.githubusercontent.com/Descent098/ezcv/master/.github/logo.png)
Edit
Looking at your post I just noticed you have a .pdf file not a .png. PDF's can't be loaded using the inline image syntax, since they aren't inline images. There is a pseudo-solution here, but there's no real clean way to do it otherwise.
upload your picture or file to github.
open that file in github and copy its link.
open Readme.md file and type ![Model](Paste_link_here)
enjoy!
I'm a developer, I need many screenshots to put in readme.md file where to store or host it? I found out that some people use https://user-images.githubusercontent.com/{path}/{filename} to host their image and link them with readme.md file. How to put images there??
You can create a .github/images directory in your repo and add all your assets there.
Assets added here will be available on
https://raw.githubusercontent.com/{github_user_name}/{repo_name}/{branch}/.github/images/{asset_name}.{asset_extension}
Once you push .github/images directory to remote your assets should be available through the mentioned link.
And https://user-images.githubusercontent.com/ is used by GitHub to store images added in issues, PR's, etc.,
Hope it helps!
UPDATE:
You can also create an assets directory in the root of your repo and use a relative path to the image.
/assets/{asset_name}.{asset_extension}
![Alt Text](/assets/{asset_name}.{asset_extension})
With this, images can be previewed without actually pushing to remote.
Hosting on user-images.githubusercontent.com subdomain
If you do not intend to store any images in your repository, you can always use this https://user-images.githubusercontent.com/
To host your images in user-images subdomain you can do the following
Click New Issue this will open up the issue creator.
Drag and Drop or Upload your image in the body content
Wait for upload completion and copy the URL for the image.
Cancel the issue creation and continue.
But you will not have access to these images once uploaded, you cannot delete them. You can always contact GitHub Support if required to delete.
Just drag and drop your image from your local pc to github readme in editable mode.
I took a screenshot of a diagram and tried to paste it directly into a comment in GitHub and it was automatically uploaded to "https://user-images.githubusercontent.com/" and embedded as a markdown tag. Then I tried to paste the same tag into a readme.MD with the same link and worked for me.
When you are editing the readme file on github, you have to drag the file you want to add in this specific box. That worked for me. If I dropped it anywhere else, it wouldn't load.
While editing readme.md in GitHub UI, paste the image from the clipboard directly in the readme, and the image is automatically uploaded into user-images.gitHubusercontent, and the link is updated in the readme to show the image.
To add or store them just open the issues click on new issue and drag and drop your desired image in comment section and wait for it to upload in user-images.gitHubusercontent. when its done just copy that and paste it to your README.md file
You can simply put the file where you want it in yours repository, click on the file from the github.com page and left click the Raw button or right click Download button and select Copy link address. It will show the full path url, then you can just put it into any Markdown text.
Recently I joined GitHub. I am hosted some projects there.
I need to include some my GoogleDrive images in my README File. I don't know how to do that.
First, get a share-able link to your Google Drive image so anyone can view it.
Then, the GitHub-flavored markdown for an image is what you're looking for:
![optional-description-here](link-here)
This is the syntax for an image to be loaded from a link. My favorite example:
![StackOverflow logo](https://www.stackoverflowbusiness.com/hubfs/B2B-SO/images/logo-so-PRINT-4.png)
I even added a public example for you here on my GitHub