I'm trying to see what a certain webpage would look like if I replaced a certain image with another. Rather than upload the image, edit the site, etc, each time I tweak it, I'd like to know if there's a way to change the image in the page to my local version while viewing the remote page.
I use Firebug for debugging web development usually, but I'm open to any other tool that might do this.
(It is absolutely impossible to search for this and find anything but questions about dynamic image swapping on a deployed website, so sorry if this is a duplicate.)
Added: I just tried substituting a file:/// URI pointing to the image (copied and pasted from the address bar after manually opening the image), and alas, it did not work — the image fails to change.
It seems to only work with the http[s] protocols (likely for security reasons). You can store your images on service like Dropbox, share the image or folder, then use the public URLs.
Really, you can use any web accessible images, so a local server would work too.
If your image is in a localhost server(not as file mind you) i think you can still put that localhost url in the firebug inspect element and it'll work.
Tried an absolute file path but it doesn't work apparently. So I guess you just have to make do with a localhost server image. That works for me
Quick and Lowtech Answer: Take a screen shot of the page open it in photoshop and drop the local image on a layer above the webpage image.
Hi if you are serving from a webserver, u probably can't point it to a file on ur local drive. Even if its localhost, u can't point to a local file c:/test.jpg for example. Its because the browser sorts of sandbox ur page so that scripts can't access local files.
One way is to upload the new file (new_file.jpg) to the webserver, give the image link an id
<img id="something1" src="test.jpg"/>
Using jQuery in the firebug watch window do
$("#something1").attr("src","new_file.jpg");
You should see the image change. If you are not using jQuery, you can use document.getElementById("something1") and get the element to modify.
Another way is to use http://makiapp.com/
You can overlay an image from you computer onto any website you look at with this. Very cool tool for lining up a comp with your code.
You can:
Drag your test image into Google Drive
Open it in a browser
Go to the actual image path
Use this path as a substitute in Firebug
It's almost as fast as working from a local drive.
Related
I downloaded a binary via docker for the Gogs project (https://github.com/gogits/gogs), set it up (via docker pull gogs/gogs) and the server works as expected. Now I'm trying to customize the html a bit to look consistent with our company's other tools. When looking at deployed project, the assets of interest are in the following directories:
public/img/*.png
public/css/*.css
templates/*.tmpl
When I update the css, changes take effect right away, when I update tmpl, I need a container restart (implying that html is generated at server start time), when I update anything in public/img/ directory, however, I can't seem to get those assets used at all and I'm clueless about what's happening since most web servers/frameworks treat public/img/ as a static directory with all of its contents publicly visible by default.
Here is what I've tried so far and the outcomes:
Action: copied a new favicon image (my_favicon.png) into public/img/ and changed /templates/base/head.html to point to it (/img/my_favicon.png) instead of the original (/img/favicon.png), left original untouched and restarted the container.
Result: page loads with broken image icon, DOM inspector says that it's pointing to /img/my_favicon.png but doesn't show the image, going to that URL directly doesn't show the image either.
Action: change .tmpl back to point to original image (/img/favicon.png), overwrite original with the new image. I tried this with the main lg-gogs.png logo too.
Result: page loads with broken image icon just like before.
A grep search for image name revealed that only the .tmpl I modified and config.codekit are mentioning it (and I'm not at all familiar with CodeKit, but the instructions claim that it's only relevant for git, not me, and to leave the file alone, although it seems to profile names and sizes of all images - however I don't see anything else on the server reference this codekit file).
I have no idea why changes to css and tmpl work fine, but images cause this unexpected result. Does anyone have an idea of what's going on, why the server isn't accepting the images?
I would like to download all images in full quality from this blog: http://w899c8kcu.homepage.t-online.de/Blog.
I have access to server, but I can not find the directory where the images lie. When I use Firebug on the first picture, it shows me http://w899c8kcu.homepage.t-online.de/Blog;session=f0577255d9df9185d3abe04af0ce922d&focus=CMTOI_de_dtag_hosting_hpcreator_widget_PictureGallery_15716702&path=image.action&frame=CMTOI_de_dtag_hosting_hpcreator_widget_PictureGallery_15716702?id=34877331&width=1000&height=2000&crop=false.
How can I find the file paths like /dirname/image.jpg?
According to its HTML output the page obviously uses the CM4all content management system (CMS).
I don't know how precisely this CMS is working, though generally CMSs normally either save the files under cryptic names within a folder specified in the CMS's configuration or not in the file system at all but within a database.
Also, CMS may only save compressed or resized versions of the original files.
So, if you don't want to or are not able to dig into the server-side script code to find out if and where the images are saved, you should contact the company behind CM4all about this.
I have an iOS app that contains a UIWebView, which display a webpage. Sometimes the page displays a different image than the one associated with the src link.
A user sent me a screenshot where it was clear that one of the icon images had been replaced with a completely different image. The same wrong image was displayed in each of the instances where this icon was supposed to be displayed. Refreshing did not solve the issue, but closing and opening the app did. (Or maybe she actually deleted and reinstalled the app.)
The html for the icon is just an img:
<img src = "/the_icon_source">
The img src is hardcoded directly into the HTML file. I therefore don't see that the HTML itself could have been wrong or said anything besides "/the_icon_source".
So how can the wrong image be associated with an image src? Could the server be sending the wrong image when it's asked for "/the_icon_source"? Could the iOS app be caching incorrectly, mixing up images? How to test and fix?
I myself cannot reproduce this issue. I'm not sure how often it occurs, but several users have mentioned it, also for other images on the page. They have only mentioned it occurring in the app, not on the website. This may just be because the app is used more than the website.
My host is Webfaction and the images are served using WebFaction server’s static-only front-end nginx process. The app displays the website in a UIWebView. (Webfaction suppprt merely told me that they served the right images.)
Is the problem not that you have it like this:
img src = "/the_icon_source"
rather than like this:
img src = ".the_icon_source"
If this is sat on a linux server the / will be pointing to the root directory whereas the . or simply the_icon_source would simply point to the directory in which the website is sat which i assume is where the image is also located.
I need to upload images into a page in my website.
I usually use WinSCP FTP program because it gives me the option "Copy to Clipboard (Include paths)". I copy images' URL through this option and the images are usually uploading and displaying successfully to the website.
I'm trying to do the same now for a new page but that is not working. Using any option in WinSCP is not helping at all. All I get is a small icon instead of the image. But when I use FileZilla for copying the URL, the images are uploading and displaying successfully. BUT the problem is that the page is requesting the username and the password to display the images.
I've been googling about it and I realise that the problem could be that I need to change the FTP URL to HTTP. I tried to do it this way:
ftp://username#domain.org/domain_restore/pics/anton.jpg
to:
http://username.domain.org/anton.jpg
That is probably totally wrong? I tried some other ways but the problem is I'm only a beginner and I don't have the knowledge how to edit it or how to find out what the problem is.
I followed the instructions of someone from the support of my host and they advised me to do a restore to all my directories in the FTP manager. I did that but I feel like I messed it up because now all the folders and the directories are duplicated. Could that also be the problem?
When working on a static mirror of the site, the sIFR is rendered correctly using Dreamweaver's live view. When viewing site locally in a browser, the regular text is printed, as expected. However, when uploaded and viewed from a remote web server, neither is visible.
I am using version 3 of sIFR, and the site can be viewed here, with an example page employing siFR implementation:
http://www.thevulgarbulgar.com/TEMP/rush/vacancies.html
Whereas it should look like so:
rush.co.uk/vacancies
Thanks for looking.
vb
The Flash movie can't be found: http://www.thevulgarbulgar.com/sites/all/themes/basic/flash/futuraxb.swf
ahh, tis looking from root, when file is here: http://www.thevulgarbulgar.com/TEMP/rush/sites/all/themes/basic/flash/futuraxb.swf
Thanks.