images not showing / displaying after moving to server - javascript

I tried to find the answer to this problem - but had no luck finding it yet.
I moved a site to to the server. All is working fine - just the images are not showing up.
I know it is a (relative) path problem- but how to solve it??

If you are using chrome simple press f12 and look at the console tab, you should see some red errors stating that an image could not be loaded, then looking at the file path you can see what exactly is going wrong
Chrome console should look something like this

Related

How do I able to see the source code of this website www.samy.pl?

This website (www.samy.pl) uses some technique so that no one can inspect the code (Ctrl+Shift+I) or view source (Ctrl+U). It can detect if you have opened the console or inspector the code automatically changes.
How this is possible?
You could always save the website.
In chrome open the menu -> more tools -> Save page as..
You should be able to run the html file in chrome, and use Dev Tools without it blocking you.
There is a console "clearing" API that is mentioned in this answer.
Here's what I think is happening:
First, I think Google Chrome DevTools emits an event when it is open/launched.
The page author listens for this 'launch' event with the following handler logic:
Run a chrome.devtools.inspectedWindow.eval DevTools inspection API
Set document.body.innerHTML to the winky-face div
Also, a setInterval that executes a console.clear() before the console.log() of "no source for you".
I also inspected the EventListeners tab of Chrome DevTools while reading the "no source for you"-page.
Unfortunately, the two event listeners you can view don't seem to do anything useful:
one returns false
the other wires together forms and their associated submit actions.
Hope this helped
hahaha, this is a good one, you should not expect less from samy!
Now I see why people think it is the wrong answer (the source get replaced if you do otherwise)
1.Navigate to site with inspector open there you end up with "No source for you! You found easter egg #7."
2.and then check the source to find Easter egg #2:
view-source:https://samy.pl
you will see:
/*
No source for you! Easter egg #2
*// AFTER SOME LONG WHITE SPACES HERE /.source.replace(/.{7}/g,function(w){document.write(String.fromCharCode(parseInt(w.replace(/ /g,'0').replace(/ /g,'1'),2)))});
This is the way he loads the site(by injecting js), by replacing two type of white spaces for 1 and 0 and parsing that to char code by some regex and then that to string of course :D
https://de.wikipedia.org/wiki/Whitespace_(Programmiersprache)
If you paste that part to a js console, you will get the tags that loads the page.
ps. to see the rendered source, just load the page normaly and hit F12 after disabling javascript.
Have fun!
Create an index.html somewhere, containing an <iframe src='https://samy.pl/'>. Load it in your browser and then open devtools. You will see the source inside the iframe.
Update:
Go to view-source:http://samy.pl which is the link of what the view source right click brings you to. It only works on Chrome I think.
If you are using chrome, go to the menu at the top right. Then go to more tools, and click developer tools.
After a lot of tinkering and speculating together, my roommate succeeded in the end with quite a naïve approach.
Simply open the Chrome devtools and copy out the source before it gets replaced. Giving Chrome processes low priority and doing some heavy-lifting with your CPU (compilation or other) helps.
Chop, chop.
Ah! I have found an extremely easy way to do it.
1. Open Firefox (Chrome only shows you part of it).
2. In the URL bar, type in javascript:alert(document.documentElement.outerHTML);
3. Press Enter.
4. Voilà!
New Way to find the source code! But its complicated!
Open a new tab.
Open Devtools (Inspect Tab)
Click On Toggle Device toolbar (the mobile like icon)
Click on "No Throttling" to slow down the page loading time
Select "Low - Tier Mobile"
Open the page!
When you see the icons appear on the page, you can now see the source code! :)
sorry very late
but i think i have the answer
He used this node package
to which he has contributed and forked too
the package docs say that it wont work if the devtools are undocked
You can simply use the developer tools in almost all the browsers. Just Press F12 and the developer tools section will be there.
Thanks

Firefox page load event very long

I'm going to try to explain an issue that scratch my head...
When I open this website for the first time after opening Firefox (v43.0.3), the UI freeze during about 20 seconds and I don't undersand why. For example you can see that the background image appear after almost 20 seconds...
So, I used firebug net panel to try to understand where the problem comes from and I notice that the page load event is very long but I can't see any tasks executing during this event.
here is a screenshot of firebug Net Panel
When I open the website with Chrome it works fine, does someone has ever encounter that kind of problem ?
I hope that makes sense, thank you in advance.
You're making 31 requests (according to my NET panel - FireBug) which add to 323ms (at least in my case). Your background image is loading ~1s after. Maybe if you'd try to reorganize all that sprites you're requesting into less files - but it seems fair as loading time for me.
I once had a problem with Firebug itself. I had to turn it off and\or uninstall to get the page load normally on Firefox.
In my case it was an effect of problem between Firebug and Telerik Kendo JS Library.
Maybe you have a problem similar issue.
Thanks for your answers, indeed it seem's to comes from my firefox configuration or addons/plugins.
I use a Firefox pre-configured by my socity, so I installed a portable firefox to try if it works and the website is loading normaly.
Now I just have to find from whitch config or addons/plugins the problem comes from, thanks again !

Chrome Inspect Element is not showing all Javascript

The current project I am working on builds a page's javascript code based on some conditions. All the code works but when I go to the Developer Tools to see it, it is not showing. Or more like it is truncated and 3 dots added at the end.
It seems to be a change with the recent update. It is extremely annoying to not be able to see everything. Does anyone know how to make it show everything? If it helps, I'm working on a mac. Thanks.
Chrome Version 42.0.2311.152 (64-bit)
If you right click on the <script> tag and select "Edit as HTML", you'll be able to access the whole script, without the hyphenation.

Buttons appear to disabled after the screen refreshes the second time

Folks,
I have an extremely weird issue that I just cannot figure it out. Let me explain it in a very simple way. I have two servers (DEV and TEST) and each of them I have deployed the same version of the source code. Now everything works fine in DEV but TEST seems to be causing the problem:
Problem:
I have a webpage which is like a register account screen. Its got things like name, address etc. At the bottom is the save button. Once I click save, its supposed to give a warning message (its two buttons) that says I need to either click on the override or edit button. I click edit, come back to the same screen and hit save. Logically it should show the same override and edit buttons but they appear to be grayed out and disabled. And this is only happening in the TEST server.
Things I have already tried:
Pointed the TEST database to the DEV.
Pointed the TEST business rules to DEV.
Merged all possible dll differences from the DEV to the TEST.
The issue works fine in Firefox or Chrome. It fails only with IE.
The same code works fine in my local machine.
I am out of ideas. If anyone of you have seen similar issues like this please let me know how to figure this one out. I'm pretty sure its not a code issue as it works fine in DEV and my local.
Thanks everyone!

Why does Google Chrome 9 not show images from Amazon S3?

If you go to this site, you'll notice a big image in the middle.
If you inspect it, you'll see this.
<img src="http://s3.amazonaws.com/mosaicimages/hmn58067pa">
If you hover over it during Inspect mode, you'll see this:
img[480x640]
And that's normal. The picture should display.
But sometimes, when I browse my site, the image simply does not display. The HTMl is the same. Everything is the same. It's just that the "cache" messes up.
This is what it looks like: http://i52.tinypic.com/1190xu0.jpg
When the image doesn't display, I clear the cache in Chrome browser settings, and the image displays again. After browsing the site again, random pictures disappear.
It's weird because when you inspect it, the code is the same. However, the image says:
img[0x0]
That's very awkward, because the image really is there. it's in S3 and it's fine.
It happens on other pages as well, not just this page. It happens for all images that are in S3.
Some of you may not be able to reproduce it. Some of my friends reproduce it. but if you can, please help, thanks.
Edit: I found a few bug issues related to Chrome? Is this it?
http://code.google.com/p/chromium/issues/detail?id=67373&can=1&q=image%20304&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS
http://code.google.com/p/chromium/issues/detail?id=68622
Edit: everything works fine in incognito mode.
Do you get the following warning in the console?
Resource interpreted as [something] but transferred with MIME type [something else]
It may happen if an image is loaded dynamically (i.e. img src changed at runtime on the client) - which was nicely responded to here.
This could also be caused by the browser actually receiving an incorrect MIME type declaration - I don't imagine that would be an S3-specific issue (given the apparently wide range of similar problems encountered) and would rather suggest it could be an issue with a forwarding (corporate?) proxy etc. - this was the case for us when including fonts but never with images.
Google chrome has an excellent report issue located in the settings tab, take this issue to them,atleast they will rectify in future release chrome versions.

Categories