I'm changing the marker image upon mouseover of an element on the page, using the setIcon() method. It works fine when the url is something like this:
marker.setIcon('https://www.google.com/mapfiles/marker_green.png');
but when I try to get it to find an image in my local application directory, it can't find the image (the original marker image disappears but the new one doesn't appear):
marker.setIcon('images/myMarker.png');
I've tried every possible url (app/assets/images/myMarker.png, /images/myMarker.png, assets/images/myMarker.png, etc), and also placed the image in many different locations, it still doesn't work.
How do I get the javascript to find my png??
Assuming that it is an asset pipeline error i.e marker_green.png becomes something like marker_green-336339d13ed7edf253018e0f7f70bee2.png in production. Here are a couple of solutions:
Place the marker_green.png file in a public directory e.g. public/mapfiles/marker_green.png
or
Set a data attribute for the image path on a html element such as the div which loads the map and get is using JS/jQuery. i.e:
HTML:
<div id="map" data-marker-url="<%= asset_url('marker_green.png') %>"></div>
JS:
var markerIcon = $("#map").data('marker-url');
marker.setIcon(markerIcon);
It sounds like this is an issue with the rails asset pipeline. Here are a few options you can try:
1) Forget about the asset pipeline (not ideal), and move your marker to public/images. marker.setIcon('images/myMarker.png'); should then work.
2) Add the .erb extension to your file, and use asset_url to get the proper asset path when referring to the image: marker.setIcon("<%= asset_url('marker_green.png') %>");
It would be good to read through the asset pipeline documentation to figure out what will work with your configuration.
Related
So I found this piece of code: https://gist.github.com/NoUsername/9308327
I downloaded it as zip, created a new folder name "images"in the root directory (same folder where I put the HTML file), and added some jpg pics in it. But when I opened the HTML file, the images won't load.
Is something wrong with the code?
P/S: When I changed the source of the tag to "/images/<1st pic's name>.jpg", the 1st image showed up just fine, though.
I believe this script assumes you have enabled directory listing feature of apache for /images
See https://support.tigertech.net/directory-index
When you access http://your.server/images it should show a list of the files as a html page. This script uses this list to get the image urls and render them.
To enable the feature you need to create a .htaccess file inside /images with the options provided in the documentation link.
If the answer of #venimus doesn't work. Be sure about your image path. You can use fullpath istead of "/iamges", like "http://localhost/image_directory". Last of all If you image's extension in uppercase like "image.PNG" it can't find your images.
I have a website.
http://shipm8.ship2you.co/contactus
I have to change the icon that is appearing on the map, but I don't know where that icon is located.Can anybody help?
view-source->main.js->http://shipm8.ship2you.co/images/marker.png
When you check page source (right click-> view source), you should find image URL there. If you can's see it, itis most likely it is served by JS from some file. My assumption was to check custom (not known library seen there) file and first one to check was main.js file. In that file you would search for block of code that is responsible for google map. Actually first logic thinking for you should be to check google map code - where is called, calculated, executed... So there you can follow URL for marker. I noticed it is relative URL and just being appended to base url it showed image as well.
I need to generate a PDF with an image in the background.
To generate the PDF I'm using jsReport.
I'm using the HTML tag image <img src="Content/img/boleta2.png" /> and this is working great, because when I open this in Firefox, the image shows up.
But when I generate the PDF, only shows the HTML without any image.
In the official page http://jsreport.net/learn/images
it says something like "To upload an image you can use simple http POST...."
But I don't understand this very well.
Content/img/boleta2.png seems like a relative path to somewhere. In every case jsreport has no idea what is the full path.
You can use html base tag to specify the root path http://www.w3schools.com/tags/tag_base.asp
Or you can use full path directly in the img src.
The image extension is used for uploading images directly into the jsreport storage where it can be later referenced. Image is uploaded usually from html jsreport studio, the mention about http POST is about using API what is an advanced use case you probably don't struggle with right now.
I'm new to js, and I'm playing about with a for loop that places images into a #div using .append()
totalSlides is a dynamic int and can change, I want to display the same amount of images as the number of totalSlides.
I'm pretty sure the for loop logic is correct, but for some reason the images are not displaying. When i inspect in firebug i get the error "failed to load given url". I know that that url is correct, i have even tried the full url path C:/complete/folder/path etc..
I'm sure it's an easy fix that i should get but for now i just can't see why it won't load my images.
for(i=0;i<totalSlides;i++){ // Loads all number images into html
$('#numbers').append("<img src='images/numbers/number"+i+".png'/>");
};
Thanks in advance.
Jase
One reason might be if the JavaScript is located in other folder (e.g. /js/myfile.js) then the relative path will fail since it will look for the images folder inside the JS folder.
Try giving path starting from the root:
$('#numbers').append("<img src='/images/numbers/number"+i+".png'/>");
(Note the added "/" in the beggining of the image source)
I have some jquery code that toggles an active vs. inactive image for a button when a user clicks it. It works fine when I just run everything from windows statically with relative paths.
However, once I migrated it to my django dev box clicking the button will fail to load the desired image if I set a relative path to it through jquery. All other static images are serving fine through css with relative paths, but if I set the relative path through jquery on document load, for instance, it doesn't work. I've confirmed through inspect element that the paths are the same and jquery is setting them correctly.
After trying various relative paths for 20 minutes, I found out that setting the absolute path of the development server works, i.e. "url('http://127.0.0.1:8000/static/img/img.jpg'). I'd like to get relative paths working as this method has its limitations with flexibility and deployment.
Am I running into a limitation of django static file serving? Did I find a bug? Or is there something I'm missing?
Thanks in advance!
I don't know Django, but one approach when your server-side framework gives you a root path is to export that into JavaScript in the main document:
<script>
templateRootPath = {{% static "path to your template dir" %}}
</script>
and to then use where appropriate:
$('#mybutton').css('background,"url('"+templateRootPath+"/img/img.jpg')");