My images' relative paths do not work locally, instead they only work online when I push a commit to github and open the page with the web URL. My repository is synced with my dropbox folder which is mounted to my local disk, so the relative paths are supposedly same like following:
#container {
background-image: url(/media/image.jpg);
}
the images just show up blank when I test view the page from my local disk :( so that I have to change them to absolute paths each time. super time consuming.
Any idea as to why this happens?
This is most likely because your paths are relative. If you run your site through WebMatrix or Visual Studio locally, it will pick up the image files as they will be present at:
localhost:xxxx/media/image.jpg
But when you open a html page in the browser, it is not running on a server so it will look for:
/media/image.jpg
One option to do this without installing bulky editors is use your local IIS and point it to your files. This way when you run it through localhost, your image paths will be understood by the browser.
Related
I coded a custom site and I am trying to host it on GitHub to allow for version control and beta testing before launching it.
For some reason, the website isn't displaying my images - anywhere. Even though it works great locally.
My Github
Your portfolio_final website serving the files from (austinmrobinson.github.io/) not from portfolio_final/ directory. So, to show your images perfectly use relative path (just add . before image source) instead of absolute path.
Change image source:
src="./images/service_Development.svg" instead of
src="/images/service_Development.svg"
N.B. Adding a ./ means current directory.
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've created a website in Dreamweaver that consists of images and pages. You can navigate through the pages via a taskbar and the images are viewable on certain pages. It all works fine on my local laptop but, when I zip the file and try to open it from my desktop computer, the text comes up but all of the images and links are broken.
Is there anyway I can fix this without restarting my whole website?
You need to unzip your files first. That's where your problem is.
I am creating a project wherein the user can upload his photo. This photo is stored in the folder "images/uploads/filename". When his profile is created and the photo is to be shown, I use the <img> tag with src as "images/uploads/filename", but the photo does not show up.
If I manually copy the photo to an adjacent folder "images/abc/filename" and then use it as the source then it works.
How is this caused and how can I solve it? I need to use the same folder to upload and download photos.
That can happen if you're running the webapp as an IDE project and are storing the uploaded images in the IDE's project space. Changes in the IDE's project folder which are performed externally (as by your servlet code) does not immediately get reflected in the deployed server's work folder. Only when you touch it (by refreshing the project) or by copying it (as you happen to have found out), then it will get reflected.
After all, storing uploaded files in the webapp's deploy folder is a bad idea. Those files will get all lost whenever you redeploy the webapp, simply because those files are not contained in the original WAR file.
You need to store them somewhere outside the webapp's deploy folder on a different fixed path like /var/webapp/uploads. You should not use relative paths or getRealPath() to create the File object around it. Just use a fixed path. You can always make the fixed path configureable as a context param setting, a VM argument, a properties file setting or even a JNDI entry.
Then, to serve it to the world wide web, just add exactly that path as another docroot to the server config. It's unclear what server you're using, but in Tomcat it's a matter of adding another <Context> to the server.xml.
See also:
Uploaded image only available after refreshing the page
How I save and retrieve an image on my server in a java webapp
Make sure your have the correct path and include the image extension
just for testing, put your img tag inside the index.php
<img src="images/abc/filename.jpg">
/root/index.php
now put you image in to the your abc/ folder
/root/images/abc/filename.jpg
This should display the image.
if you have your img tag inside another folder in the root like below
/root/user/index.php
now when you use you img tag use this path (relative link):
<img src="../images/abc/filename.jpg">
note the beginning of the image path "../" this is used to go back to the root.
if the php or html file that is holding the img tag is even deeper, just remember to add ../ for every level, 2 folders deep whould be:
<img src="../../images/abc/filename.jpg">
Question was quite vague so hope this is what you are looking for.
let me know and if this is wrong, explain a little more and i will try to help :)
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.