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.
Related
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.
Using <img> with the src, a local file works fine on a PC. But on Android 7 it doesn't get displayed; instead a no photo icon is displayed. How can I solve this?
<img src="photo.png">
(The photo.png is placed in the same folder as the .html file.)
You have to declare the path of the photo:
<img sc = " xxxpathxxx/"photo.png">
Else, make a separate image folder and call it.
The issue with this is how Webview works with local files. File paths aren't the same as your PC Google Chrome paths where you can drag an HTML file to the browser and have it be loaded in a certain path, and because of that photo.png doesn't direct anywhere.
Instead, you need to use the file:// schema to access local files. Regardless of whether photo.png is local or an Internet resource, you'll need to use photo.png's absolute path, e.g.:
http://localhost/path/to/photo.png
http://www.mywebsite.com/path/to/photo.png
file://data/local/tmp/photo.png
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.
I have a div that begins as follows:
<div id="info_picture" style="background-image: url('assets/img/channels/banners/3')"></div>
The reason there's no file extension for the image is that it can be uploaded by the user, and I don't want to store the extension in the database (or force them to only use one image format). I have a line of javascript that changes this background image:
info_picture.style.backgroundImage = "url('assets/img/channels/banners/"+channel+"')";
However, on inspecting the element, the background image style appears as the absolute path, rather than the relative path I specified in the script. That's a problem, because without the extension, that causes it to be transferred with application/octet-stream. Then chrome chucks a warning, and the image doesn't display. How can I force it to load the relative path instead of the absolute path?
My gut says it's not a javascript problem or browser issue.
The problem may be in the actual file, and the file actually has application/octet-stream as mime type.
If I were you,
I wouldn't use assets directory to serve image. My choice would be public/images directory at least. assets are not for dynamic files, but for static files.
If the image are served from server without extension name, I would serve images from
application by setting mime types properly through your controller, guessing you use rails.
I don't know your folder structure, but you can use "../" for every folder you want relatively to go up from the place you execute code in.
Try:
info_picture.style.backgroundImage = "url('../assets/img/channels/banners/"+channel+"')";
And see how path will change.
I was wondering if it is possible in JS to open a directory, read an image file and display it to Html? I believe JS restricts from being able to open any file in a directory directly, but what I want is:
I have a XML file which will contain the path to a image file in the web server root folder
so my hierarchy is like this
webserver root folder--->|
html
js
css
images
xml
, and I will use XmlHttpRequest and feed the directory tag and file name tag to my JS file which has to display the image to my frame in the Html page.
[My image is also in the same webserver root folder but in a different folder from html]
Any pointers on how to go about it? I guess we can store the image file also in XML as a base64 encoded data, but that would make the data exchange huge, also don't know if this is a ideal method (is it? please suggest)
Please give me some tips for this.
Thanks
Balaji R
JavaScript does not have access to filesystem on server, since it runs on the client side.
But with JavaScript or Ajax you can call some php code on server which will read the image from the file system and then it will pass this image back to the JavaScript.
I have described here how to do this.
If I am following you correctly, example.com/js/somefile.js is trying to access something like example.com/images/image.jpg?
If so then i would either use the absolute URL of the image:
"http://www.example.com/images/image.jpg" or the relative path "../images/image.jpg"
When referencing the images in your code you could actually use a plain text file, one image path per line. Then in your onreadystatechange function:
pictures = var.responseText.split("\n");
now pictures is an array of picture paths.
JavaScript only has access to the information & priviledges that the browser has access to, so unless the image is in a directory that would normally be accessible on the web site, you're not going to have much luck using just JavaScript.
Is there any way that you can make the path in the filesystem available to the web document root folder? Maybe by using an Alias or Symlink?