My images won't show up on an Angular 2 app on Github Pages. I could see the images during the app's development, but now the relative link returns the error: Failed to Load Resource on inspection.
The image link from development looks like this:
/assets/images/juno.gif
I tried copying the path from repo, but the image still doesn't show
mybiography/src/assets/images/juno.gif
I also tried copying the github link to the image file, but my Angular CLI service redirects me back to the application's home page.
https://github.com/st4rgut22/mybiography/blob/master/src/assets/images/juno.gif
Please advise what I should do, here's the link to the page where the images fail to show upon dropdown selection: https://st4rgut22.github.io/mybiography/work
When using relative path just start src path with ./
Change src="/assets/images/rot.gif" to src="./assets/images/rot.gif"
N.B. ./ denotes the current location
Related
I have a react app that runs perfectly on the local port, but when I upload it to github pages through npm I get nothing but a blank screen.
Failed to load resource: the server responded with a status of 404 ()
I receive many 404 errors like these with no clear source. the page built fine, but it doesnt render anything.
heartlocket.github.io/IF
The problem is that you reference resources(js, css) using absolute urls, with site route as base url, like /static/js/main.b9eb92d4.chunk.js, but your gh-pages actually published to subdirectory /IF/, so real location of your resources is like /IF/static/js/main.b9eb92d4.chunk.js
You can fix it several ways:
change all links to relative - i.e. remove leading slash character, like static/js/main.b9eb92d4.chunk.js
add directory to your absolute urls - like /IF/static/js/main.b9eb92d4.chunk.js
I understand that the normal workflow with hugo is to generate a static site using the "hugo" command, and then deploy your site by copying the public/ directory to your production web server. I don't want to do that: I just want the html files in the public/ directory to display correctly, and have links that work, when I open them in my web browser. I do not want to run the "hugo server" command.
Specifically, the links that are generated are all missing "index.html" at the end.
For example, a link to the About page will be:
file:///C:/Users/myusername/Documents/HugoTesting/quickstart/public/about/ which will open a view of that directory when I click on it. But it will display the web page properly if I can change the link to: .../public/about/index.html
How can I make that change throughout my site? I already set "relativeUrl" to true in my config file, as it says to do here:
https://gohugo.io/content-management/urls/ as it was necessary to get my index page to display properly. The documentation there says this helps to " make your site browsable from a local file system" so I know it must be possible.
I've tried using permalinks and using frontmatter to try and add "index.html" to all of my links, but hugo is adding an extra '/' to whatever I specify using permalinks, and while the "url" tag in the frontmatter works, it's not feasible for me to do for every url in every page.
I think ugly URLs configuration in Hugo might help you with this, (e.g., example.com/urls.html).
Set uglyurls = true or uglyurls: true in your site’s config.toml or config.yaml, respectively.
I need help on my react app portfolio that I've uploaded to Github. Link: https://amex23.github.io/my-portfolio/
The pages doesn't show up, thoug it runs fine in my local computer.
PLEASE HELP
The links to your content are broken.
In your source they are like:
https://amex23.github.io/amex23/my-portfolio.git/static/js/main.3ac9e73c.chunk.js
They should be like:
https://amex23.github.io/my-portfolio/static/js/2.df4fd8bb.chunk.js
You can open up your index.html and change them all manually but there is something wrong with your build step or site config that made them that way
I have created an app, wherein i have given images paths as recommended by community. While running locally it loads and displays all the images but after i deployed on github pages, it is not taking the correct path to get the images. I dont know how to resolve the issue , can someone help me ?
i have tried adding %PUBLIC_URL% and all but nothing seems to work
This is what i have tried and works in local. My images are located under
public/images/login-background.png
background: url('/images/login-background.jpg') center center
no-repeat;
While i publish my project to github, url changes from 'localhost:3000' to 'https://singhkshitij.github.io/abc/' so all the images take url as
https://singhkshitij.github.io/images/login-background.png
while it should be
https://singhkshitij.github.io/abc/images/login-background.png
I'm going to assume you've used create-react-app to bootstrap your application. In which case you need to specify the homepage property in package.json to something like
"homepage": "https://singhkshitij.github.io/abc",
Reference - https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths
I had the same issue. Basically you need to change
url('/images/login-background.jpg')
to
url('homepagePath/images/login-background/jpg')
where homepagePath is the url of your application served by github:
https://{username}.github.io/{reponame}
I know it would be great if the file wouldn't link to local resource, but using phonegap/steroids framework, FILE_URI returns "file:///Users/" path which I can use for uploading to S3 or else, but Angular won't show it in the template.
Is there a possible solution? I tried adding config to my app
.config(function ($compileProvider){
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})
but it seems that doesn't have impact on the error.
I can base64 encode my images (then works), but I would like to avoid this if possible.
thanks
See the Camera example in the Steroids Kitchensink app, where the Cordova File API is used to move the picture from the tmp folder to the Steroids app's User Files folder. Since Steroids's localhost looks for assets both in the App folder and User Files folder, you can use an absolute path, e.g. src="/my_image.png". See also the App Structure on Device guide for more information on the App and User Files folder.