Assets on nitrous.io are not loading even though html is loading - javascript

I am currently developing a website on nitrous and i have some problems.
my html code loads as a home page but there was no images, there were only images of "file not found"
the html was in folder "static_pages", ie. static_pages/home.html.erb
while the images are in the same folder. ie. static_pages/images
when i ran rails s and tried to see the web, the images does not load.
Can anyone shed some light on this?

If you reference the image by naked filename (in a view), Rails will retrieve them from app/assets/images/ by default.
You mentioned this is a static page, so I assume you are referencing the images with a path.
That path would be assumed to be from app/public/.
If you create a subdirectory app/public/static_images/ you can reference the images in your static HTML page as static_images/filename.

Related

Display image on Html page

I'm trying to display a static image located in the same folder as my Html file but it seems I can't get the right path for it to display correctly. The application I'm developing is an atlassian plugin that also includes a java backend to get Data from the Database and I'm displaying it on the frontend using HTML and javascript, the whole application runs on a webserver as a Plugin. Both the image and the Html file are located in here: D:\clone4\project\src\main\resources\templates\scheduleraction
The URL path for the web application is:
https://staging.com/jira/secure/SchedulerAction!default.jspa
I tried many ways and this is the last one :
<img src="/SchedulerAction!default.jspa/piechart.jpg" alt="pie-chart">
I need to add the correct path in the "src" so the client can retrieve the image from my Files on the webserver. I would love any hint or help!
you should use exact path like ./Image.png. And avoid using Images out of the static HTML file located directory
Try to use a service to upload that image and use the provided url.
Such as https://imgur.com/. After upload it, use into the src the correct url with the filetype extension.

file path navigation got all weird

This render the pic effortlessly on the DOM
const image = document.createElement('img');
image.setAttribute('src','Parcel.png');
document.body.appendChild(image);
But when my .js file is in another folder and image is inside one nested folder no navigation or nothing on earth renders it.
image.setAttribute('src','/img/Parcel.png')//no luck
image.setAttribute('src','./img/Parcel.png')//no luck
how would you render the image if both of your .js file and .png were in different folder?
The relativity of the path is from the POV of the HTML document you are trying to modify. The HTML document you are trying to modify does not see the path 'img/Parcels.png' (try it without slash too) either because it is not there or because there is a security file access restriction that forbids it.

Image from public directory not loading Express NodeJs

Hello I am writing an express app, i have a public directory and it has one image in it. In the app.js file I use the line "app.use(express.static(__dirname + '/public/'));" so express knows to use this folder.
The image loads on some pages and on other pages it doesn't, it loads on pages with URLs where its only one word after the base url, for example www.amazonaws.com/blogs or www.amazonaws.com/login but image doesn't load on pages with URLs such as www.amazonaws.com/blogs/best or www.amazonaws.com/blogs/102.
I'm using ejs files and they are all in the same folder, so for example the 'blogs' ejs file which is used for www.amazonaws.com/blogs works fine, but for the 'best' ejs file for www.amazonaws.com/blogs/best everthying works fine except this image does not load. Not sure why this is? Thanks for any help.
The URL to your image in the web page needs to start with / so it is not a "path-relative" URL. From your symptoms, it sounds like your image URL in the page is just a plain name such as:
<img src="image.jpg">
When you do it like that, then the browser will take the path of your web page and combine it with the filename and which URL the browser requests will differ based on whether the web page has a path or not. If, instead, you do this:
<img src="/image.jpg">
Then, the browser will only use the domain of the web page, not the path and you will get a consistent URL no matter which web page path this link is in because this is an absolute path, not a relative path.

Unable to use images from document directory in JavaScript file

I am storing user specific images getting from server in document directory. Then I want to display this images on bing map at certain pins(inside pin InfoBox). I am loading the images dynamically using javaScript. But images are not displaying on map.
I am setting images as HTML content of infoBox like,
pinInfoBox.setHtmlContent('<div class="arrow_box"><div class="content" id="content"><img id="localFile" src="file:///var/mobile/Containers/Data/Application/395E5EED-2FB4-4505-861E-2DA9AB96433B/Documents/my_image.jpg/"/>'+pin.Title+'</div></div>');
If I use any remote file and access it via http protocol it will work,
pinInfoBox.setHtmlContent('<div class="arrow_box"><div class="content" id="content"><img id="localFile" src="http://a.abcd.com/static/images/zoom/magnifying-glass.png" />'+pin.Title+'</div></div>');
I don't know why it is not taking image saved in my document directory.
Please help me to resolve this.
I solved this based on #tiblu's comment.
JavaScript file and images should be in same path.
But I can't write images to bundle as these images are downloaded from server at runtime. So I copied JavaScript file to documentDirectory during application launch to work with images. Then we can simply access the image directly with it's name and no need of specifying full path.
pinInfoBox.setHtmlContent('<div class="arrow_box"><div class="content" id="content"><img id="localFile" src="my_image.jpg"/>'+pin.Title+'</div></div>');

Why my site isn't fully functioning on public domain (in the world wide web)?

I made a simple website. The site is fully functionable in my localhost (my computer). Everything working fine here.
But problem arises when I upload the files into the web server in order for running that in public domain. There, no content is showing except the layout. No link or tab is working, no paragraph inside the body is displaying. You may have a look here.
For what reason?
I uploaded all the files (with source code) associated my website except the images and videos (since there are a lots of images and I will upload it a bit later).
[NOTE: I have xampp local server installed in my computer. All the
sourse codes files are stored inside the htdocs folder. Inside the
htdocs folder I have a folder named jquery(which was installed with
the package). I saved my .JS file inside the JQuery folder (since I
used jquery code too). So when I upload file into the server do I need
to upload the whole htdocs folder? Or how about the JQuery folder
(which contains the JQuery source code)? Do I also need to upload it?
My paths set are the following:
C:\xampp\htdocs\jquery [contains the whole project's source file]
C:\xampp\htdocs\jquery\js [Contains only JavaScript&JQuery file]
If you inspect your page and look where you expect the content to be, you'll find <div id="home">. Looking at the CSS for this, it shows line 258 of your css file has this:
#all_contents >div {
display:none;
}
This is causing all of your contents to not display. Removing this will fix the problem.
Also, if you look on the browser's console when your page loads, you'll notice a lot of 404s trying to load various scripts, stylesheets, and images. That's potentially contributing to the problem. I'd focus on fixing those first, to make sure everything is loading properly.
I tried debugging the HTML on your website. I found the following code in design.css at line number 258
#all_contents >div {
display:none;
}
Once you remove this(display:none), all the content is available on the website link that you shared.
Also, I am not sure why this is working on your local. Are you sure that you have uploaded the same version which is running in your local?
You can debug your webpage by pressing F12 and then selecting the problematic area. On the right hand side, you can see the css rules associated with the selected element.
For getting the specific content in a page and not all, create a new file by the name who_im.html and put your content over there and then You should do something like
About Me
Like this you will have to make other pages as well and add the hyper links to the menu in every page.

Categories