file path navigation got all weird - javascript

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.

Related

Trying to locate a sound file but it can't be located and running the code gets this error(GET file:(file path here) net::ERR_FILE_NOT_FOUND)

I tried adding (../) (../../) and also tried using the Path Intellisense extension which located it but the error still appears
this is how the extension located it
const hitSound = new Audio('../sounds/Ta Da-SoundBible.com-1884170640.mp3.extension');
I have the same error earlier and I wrote the full path starting from the drive name
cardImage.src = 'B:/Html, CSS & Js/js excersing/photos/KS.png' and it worked but when I tried it on the code above it didn't work
If the path '../sounds/Ta Da-SoundBible.com-1884170640.mp3.extension' in your javascript/html file would be correct, it would mean the following: The directory that contains the directory where your javascript/html file is located also contains a directory sounds where your sound file resides.
For a start, copy the sound file into the same directory as your javascript/html file and load it with
const hitSound = new Audio('Ta Da-SoundBible.com-1884170640.mp3.extension');
The whitespace in the filename (the blank between Ta and Da) could also be a problem, so I suggest you also rename the file.

How can I use <img> with a local image on Android?

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

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

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.

Switching background images with javascript forces absolute path

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.

Is it possible in Javascript to open a directory and read an image file and display it to html?

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?

Categories