A simple issue but unable to find a solution.
I have some image files that I placed in a subfolder called icons in my working directory in my ASP.NET website. I want to set an image during initialization to the markers on my Google map. But this isn't working. I have tried-
var marker= new google.maps.Marker({icon:'E:\cdeez\Sites\googletest 5\icons\busballon.png', position:pos,map:map});
It gives an error:
Not allowed to load local resource: file:///E:/cdeezSitesgoogletest%205icons%08usballon.png
However there is no problem if I place the image in the working directory. I guess giving the absolute path is not the right way too. So what is the right way in the above case.(Just a reminder- the above code will be in the aspx file).
According to the MarkerOptions docs, the icon should be a URL. However local files (embedded with file:///) tend to be ignored by browsers if the website is served over http - and I think that is what is happening in your case.
I would suggest to try out the following steps:
try using a relative path, e.g icon: "/icons/busballon.png"
try using a http path to your file, e.g. icon: "http://yoursite.com/icons/busballon.png"
Related
My css only works when I open it with live-server. I didn't realized it until I tried opening the file
of my projects. The JS functionality is there, but my project is just stale, just black and white. I'm using sass and live-sass compiler. And also using a map api leaftlet and open weather api. SO please help,
cannot seems to figure out why my css is not present when I open my project on file or in another browser.
I have seen through your file and I think your issue is your image hasn't been loaded.
You have an image of the starry sky, right? You can only see the black and white page with some icons after the search because your image hasn't been loaded.
As you access the page by opening the file, the image URL in your CSS file is the path relatives to the current CSS file, which means the URL should be ../image/night.jpg.
If you access the page through the live server, that URL is the path relative to your host.
Hope that I understand your problem correctly. I am still learning too :)
after my first steps with FLUID POWERED TYPO3.
The latest versions flux 7.1.2, fluidpages 3.1.2, fluidcontent 4.1.1, fluidcontent_core 1.0.2, vhs 2.1.4
I've got only a small issue ... I don't see my Icons for FLUIDPAGES or FLUX CONTENT ELEMENTS at TYPO3 Backend.
This is the Icon Path for Fluidpages-Images from Screenshot:
typo3conf/ext/mvz_neuhann/Resources/Public/Icons/Page/Standard.gif
I try it with or without baseURL nothing happens. The Icon is visible, when I paste the path into my Browser:
But my JS-Console says:
http://mvz.local/typo3/typo3conf/ext/mvz_neuhann/Resources/Public/Icons/Page/Standard.gif 404 (Not Found)
Because of the 'typo3/' after my URL. But why? I'm on a local Server, no File Permissons or sth., Clear Cache, delete typo3temp.
Nothing. I can't see my Icons from my provider Extension via fluidpages or flux. It's the same with my FLUX Icons, the Standard-Icon is availible but how is the path at my flux form?
I've tried:
<flux:form id="home05" options="{group: 'xy', icon: '{f:uri.resource(path: \'Public/Icons/Content/myicon.gif\')}'}">
// or
<flux:form id="home05" options="{icon: 'typo3conf/ext/my_extension/Resources/Public/Icons/Content/myicon.gif', group: 'xy'}">
//
<flux:form id="home05" options="{icon: 'EXT:my_extension/Resources/Public/Icons/Content/myicon.gif', group: 'xy'}">
While in the backend, Flux creates a relative path to your Icon. To be precise, it creates a relative path to PATH_site constant. This means in your iframe, the path is plain wrong. This is a common issue with backend images. There's a few ways to solve this:
Create a custom, absolute uri with f:uri.resource and f:uri.image (absolute paths)
Example with proper escaping would be
<flux:form id="fluidpage" options="{icon: '{f:uri.resource(path: \'Icons/Content/myImage.gif\')}'}">
prefix your path with a slash if it's a custom Icon so the path will start at your root
There should also be automatic icon discovery which will find an icon Resources/Public/Icons/Standard.(png|gif) for your page Template Standard.html
If you have further issues, please refer to our bugtracker on GitHub.
I am writing a web page to show image (image is dynamically generate by .Net charting) in a web. I have used the asp.net web forms URL routing to navigate to this page. Once I use the URL routing the image appear on the page. Anyway this is working fine for normal page browse.
More than likely your link to the image is using a relative path, and once you introduce routing you are working with a URL structure that appears to be deeper nested in the folder structure than it is.
When linking to the image for display I would recommend using root relative path something like /Images/MyFile.jpg rather than ../Images/MyFile.jpg, or similar.
This way if your route changes, and additional "folders" appear in the route, the link will still work.
I'm working on an HTML5 mobile app and I initially have the background of a DIV item set through the CSS as follows:
background-image: url('images/ClanSpider.png');
In my app, I have a method that changes the background DIV based on a selection made in a dropdown list from a previous method using jQuery:
function ResetMyHonor()
{
ClanImage = 'images/Clan' + MyClanName + '.png';
$("#MyClanName").html(MyClanName);
$("#MyHonorBox").css('backgroundImage', 'url(' + ClanImage + ')');
}
All of this works fine when I'm on the root of my page. However, I have some links within the app using hash tags to navigate the page (such as #MyHonor). When I've navigated to one of these tags and call my reset function above, the image breaks. When I pull up the Chrome Inspector to look at the DIV tag, it says that the image it is trying to load is "images/MyHonor/ClanSpider.png" which doesn't exist.
I know the CSS url will generate links in reference to its location within the application, but it doesn't matter where I move the CSS files in the application.
Is there a way for me to rewrite what comes out of the url processing or an alternate way of specifying the background image of the DIV without doing any kind of server side processing? Ideally this app will run through the manifest cache feature of HTML5, so I won't have access to any server based languages.
Try putting a leading slash on those paths to represent the root.
ie use:
url('/images/ClanSpider.png')
instead of
url('images/ClanSpider.png')
From reading through your comments on the other answers I think you're creating a problem for yourself that doesn't really exist. If url('/images/ClanSpider.png') is going to work when you upload to the web server then the trick is to make it work the same way when working locally. By far the easiest way to do this, especially if your focus is an offline app which has little in the way of server side requirements (which I'm assuming is true, as you mentioned file:/// URIs), is to run a local web server.
Python ships with a module SimpleHTTPServer, if you have Python installed then starting it is as simple as going to your L5RHonor project directory in a command prompt and issuing the following command:
python -m SimpleHTTPServer
Then instead of accessing your files with URIs like this:
file:///H:/Projects/L5RHonor/images/ClanSpider.png
You will access them like this:
http://localhost:8000/images/ClanSpider.png
All your root relative file paths will now work correctly, as an added bonus the offline caching will work correctly in Chrome and you'll be able to see from the log in the command prompt window that it is requesting and caching the correct files according to your manifest.
The simplest solution is obviously adding a slash to the URL to make it absolute. That will work fine, but it makes it impossible to move the application into a sub-directory, or to move static resources to a different server. If that is a problem, there are various alternative ways.
If the number of possible background images is finite, you could define every one in a class of its own:
.bgSpider { background-image: url('images/ClanSpider.png'); }
.bgFalcon { background-image: url('images/ClanFalcon.png'); }
...
and then do an .addClass() to set the correct image.
Other than that, as far as I know, there is no way to specify a path relative to the style sheet (rather than the current document) when setting a background image path in Javascript. You would have to work with absolute paths, or define a root path in JavaScript, and use that:
// in the script head
imageRoot = "http://www.example.com/mysite/images";
// later....
$("#MyHonorBox").css('backgroundImage', 'url(' + imageRoot + ClanImage + ')');
The location of the CSS file is irrelevant, you are modifying the .style property of an HTML element. This is the same as using the style attribute.
As this is CSS embedded in the document, all URIs are relative to the document.
You probably want to start the URL with a /, or if you really want the absolute location specified in your question: http://
Try adding a / at the start of the URL?
I have a web page that will display an image.
I created a folder within my website called 'photo' and uploaded that image to that folder using the following code:
string path = Server.MapPath(#"~/Photo/");
FileUpload1.SaveAs(path+FileUpload1.FileName);
I am using the following code but the image is not being displayed in the image control.
string path = Server.MapPath(#"~/Photo/");
Image1.ImageUrl = path + photoInfoObject.Photo;[photoInfoObject.Photo is a string of the name of the photo(eg: Penguins.jpg).]
still that image is not displaying.can anyone fix this?
Your code looks ok so this is probably a broken link to your image, for example you may be rendering an absolute path to /Photo/Penguins.jpg, whereas if you're using the build in Visual Studio Web Server with a virtual directory, the absolute path would be /Your Site Name/Photo/Penguins.jpg. So check the generated HTML to find out the path, and maybe use the "Net" panel inside the Firebug plugin for Firefox to easily see any 404 errors as the page loads.