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.
Related
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.
How can i get the absolute path of an uploaded file (that has been uploaded by input file) and use it as a <video>.
For security reasons, you cannot get the absolute path of a file picked from a file picker in front-end JavaScript. That would allow websites to potentially see private information, such as the user's name and their operating system. Also, a user might not want the website to see their folder structure and the names of their folders.
Here is a way of using a file picked for a <video> tag (You don't need to know the full path of file). I didn't make this, but it will probably help you: http://jsfiddle.net/dsbonev/cCCZ2/
How it works is you create a object url.
var fileURL = URL.createObjectURL(fileFromFilePicker);
Then you can set the src attribute of the <video> tag.
If you don't want to actually upload the file, then your question has already been asked and answered here.
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 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>');
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?