My asp.net project has several .png (and a few .gif) files in the \Content\Images folder.
Two are not found; Chrome Dev Tool's Console tells me: "Failed to load resource: the server responded with a status of 404 (Not Found)"
...and sure enough, if I click the links that it shows (e.g., http://localhost/#System.Configuration.ConfigurationManager.AppSettings[%22ThisApp%22]/Content/Images/PlatypusorangeSprite.png) it takes me to GDT's Resources tab, and although the Images folder shows that file as being there, but there is a "broken image" representation of it.
The same thing happens with just one other image file (they are all in the same location, and the references to them, in CSS file declarations, is indeed pointing to where they exist, such as:
background:#E5EDFE url('/#System.Configuration.ConfigurationManager.AppSettings["ThisApp"]/Content/Images/PlatypusorangeSprite.png') repeat-x 0 -369px;
I can 2-click those files in the VS2010 IDE, and they open up and seem to look fine.
So why are they not being found at browsetime/seen as broken images?
UPDATE
Well, apparently it's got someting to do with my moving all the style declarations out of the cshtml file into a separate stylesheet/CSS file that is referenced in the page (I went back to the bad old way and it works fine - the pngs are found again (I even imagined that I heard them singing "Amazing Grace")). Since it is not a relative path to those pngs, why would it matter that the style info is in a .css file in the Content folder as opposed to being "inline"?
I hate it when you do the "right" thing and it makes things worse.
Some clients accidentally transform suffixes to big letters like .JPG or .PNG. If you call them by .jpg or .png, it will not match.
Render your template by compiling in Visual Studio, open your browser, look into your HTML and check the rendered path of your image:<image src="..." />. Alternatively, try to call the image direcly via ftp by url in browser like ftp://www.mysite/pics/ for example and click on link, that shows the image. Then you get the correct path in the url.
Also check if the suffix ist accidentally doubled like mypic.jpg.jpg.
Any case sensitivity discrepancies,perhaps?
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 :)
I am currently trying to use CSS to stylize my application in Apex 5. The problem I am having is that when I write my CSS code in the "inline" section of any page in the application, then the CSS code works, but if I write the CSS code on Notepad and then upload the file and reference the file within my application, then the CSS code does not work. I have written several lines of CSS code, so I'll just post one small section of it as a sample so that you all can see my format:
body{
font: bold 12px/16px "Times New Roman";
}
I have uploaded the file in the Static Application Files section of the Shared Components page of the application. I have then tried referencing the file in different places, such as at the page level and user interface level, but nothing has worked so far. I'm very new to CSS, so any insight would be greatly appreciated. Thank you in advance!
After uploading the file have to be displayed in the list of static files. The list of files have a column Reference, which contain a string like this: #APP_IMAGES#test.css. Copy this string and put it, for example, on the page in the section CSS - File URLs. This should work.
Then make sure that file reference works. Open your page and take a look on a list of CSS files. The same functionality is present in all browsers, but it is accessible by different ways. In IE:
Press F12.
Open Network tab.
Press "Enable network traffic capturing" (a green triangle in the left top corner).
Reload the page. A list of files appears.
Find your file in a list:
If the file is not present, then you copied an incorrect link, or you copied it into an incorrect place, etc.
If the file is present, normally it should have status 200 (the Result column). If a status is not 200, there could be a lot of reasons (depending on the status).
If the file is present with the status 200, your CSS property doesn't work, because it is overridden with another CSS. To define with which one, go to the Dom Explorer tab.
You can try this approach:
On server, go to ORACHE_HOME/apex/images/css (path can be different, but you can find it by .css extension)
Put you file here
Id editor, in page properties, go to the CSS -> File URLs section
Write path like this: /i/css/new.css (i - in general, alias for your images directory)
I started to work with mautic (open source email marketing automation).
Im trying to build a template for a landing page and therefore I'm editing "*.html.twig" files. At least I could find out that twig is a PHP engine by Symfony. What I could not find out yet though is something actually totally simple, at least in css/html.
All I want to do is specify the correct file path to an image file as a background-image:url(''); within the style attribute of the body tag. (See example below)
How on earth is this twig working with file paths? It seems to automatically change the file path I specify, but in a way that is not comprehensible to me.
I tried several options, but the only thing that works at least partially is specifying the absolute path. As soon as I start using the template in mautic though and build a page from it and save it, even the absolute file-path gets 'crashed' on the output source code. What the heck?
I did not find much info on file path syntax in twig. What I found sounded so horribly complicated that I can't believe it should really be that complicated to simply put in a file path? Am I wrong?
Here is the example, specifying the absolute path in the actual source code.
<body style="background-image:url('http://sawiya.de/mautic/themes/mautictheme1/img/background.jpg'); background-color:#213E4C;">
When viewing the result in the browser, without adding content to the landing page template, the source code output is the following (path changed, but the result is at least that the image is being shown):
background-image:url(http://1.1.1.2/bmi/1.1.1.5/bmi/sawiya.de/mautic/themes/mautictheme1/img/background.jpg);
After adding content on top of the template in mautic, the file path is being changed even more and reads the following from the source code output (now the background image does not get displayed anymore, so its clearly broken):
background-image: url(http://1.1.1.3/bmi/sawiya.de/mautic/"http://1.1.1.5/bmi/sawiya.de/mautic/themes/mautictheme1/img/background.jpg")
What is this all about? Where can I get the info on how to easily and correctly specify the file path? Is it really that hard?
Ok, now I found out something strange. It might be a bug in mautic here.
When I open the page where I specified the image via the background-image:url() through the https:// -Protocol, instead of http://, it works!
And the resulting source code looks as expected:
background-image: url("http://1.1.1.5/bmi/sawiya.de/mautic/themes/mautictheme1/img/background.jpg")
So, wrong adress here, I think. At least to solve the bug. Hope someone finds this as a solution, until the bug is fixed.
Cheers!
Edit: Of course its better to specify the file path in a relative way, so that when the theme is used on another server, the path is still correct. In twig the best way to do that seems to be this. At least it works perfectly well.
background-image: url('{{ getAssetUrl('themes/'~template~'/img/logo.png', null, null, true) }}';)
Good day.
My structure is like this:
/
index.html
style/
main.css
images/
test/
test.html
/style/main.css says something like this:
body {
background-image: url('/images/SomeImage.png');
background-color: #000;
}
/index.html has a link to this CSS file, but, as the title says, no image will load. But it's connected though, cause the background is actually black, so the rest of the style (but images) does work.
Also, if I write the same style internally into /index.html the background will load.
Also, I created /test/test.html which says nothing but
<img src="/images/SomeImage.png" />
and the image is displayed on that page.
So, obviously, for some reason my /style/main.css can't reach files, that any other file from any other location reaches. Why does this happen? There's clearly nothing wrong with the syntax. I'm lost.
add ../ to the beginning of /images so it read ../images/imagename.jpg
Here's what your code should be:
body {
background-image: url('../images/SomeImage.png');
background-color: #000;
}
Because your image is in another folder (thats a level up than your style sheet), you need to start with "../" for a level up folder in hierarchy relative to the style sheet. So you need a relative URL:
background-image: url('../images/SomeImage.png');
Try to copy webpage, css and example image in one folder temporarily. Then use only image name for url a see what happens. If it works, it will be the image path, if not something else.. possibly position.. is this complete css you are posting?
Initially, it looks like your code is fine.
So how do you know the image isn't loading? Look in your browser's developer tools to see if the image is loading, or returning an error, or not even being referenced. My guess here would be that it is loading, but not display because of something in your CSS.
if you are in /styles/style.css you need to add:
../ 2 levels back to get to the root folder.
So as Rokin answered :
background-image: url('../images/SomeImage.png');
is the way to do it.
To link your CSS within your index file use the following:
<link href="./style/style.css" rel='stylesheet' type='text/css'>
./ 1 level back within the index.html to reach the root folder.
In addition your problem might also be a file permission problem, I always face this issue when i download images from my email and use them directly.
If you are working locally on a mac:
- Right click on the selected image
- click on **get info**
- In sharing and permissions, make sure that the **everyone** has the **Read only** permission instead of **No access**
If you are working directly on a live server:
- login using FTP (with any ftp client such as File Zilla)
- Go to the selected image
- Right click and select file permissions
- set permissions to : **664**
Ok, so basically, I replaced the not-working /style/main.css with the copy of it (test.css - described in post comments) and now it works. Why is still the question, but the problem is kinda solved I guess.
Same with me, I guess images that used in css must be in the same folder as css file. I tried every possible solution while checking with the browser tool and the only thing that works is when I put the image and stylesheet in the same folder.
I am having the same problem. Working with Visual Studio Community.
I went inspect elements in browser and found that the file directory "automatically" (i did not set it this way) says that my image folder is nested inside my css folder. dont know why yet... so I then went and moved my image folder into my css folder seeing that this is what my browser showed me in the dev tools...
so maybe for some reason when working with css your images inside your image folder should be located in your css folder and not the complete Webpage Folder..it worked.
I want to do something hackish in order to have responsive images generated automatically with js & php. I would like to do this with my css background-image: url(#/path/to/image.jpg), so that I can specify various image paths that javascript can grab but which won't actually result in separate HTTP requests.
The browser interprets the above code as http://example.com/cssfolder/#/path/to/image.jpg. Which means it is just pointing to the css folder. In my brief tests, if there is an index file in the folder the Chrome console will complain "Resource interpreted as Image but transferred with MIME type text/html" but if there is no index it will give a 404 message.
So that feels kind of bad, but it doesn't seem to affect the browsing experience. I guess developers may not like this method since it pollutes the console with errors, but is there an objective reason to avoid this? Are there some browsers that would actually mess up the page, bearing in mind that a real background image would be immediately supplied with javascript?