I am updating my online portfolio with a new website (I grabbed a template off Free-Css.com). When I preview it, it works fine. Once I deploy the website via Firebase, none of my images appear.
All of the images are in the public folder, which is where my hosting is set to. Here is an example of one of the images:
<div class="col-md-6 about-img-div">
<!-- <div class="about-border" data-aos="fade-up" data-aos-delay=".5"></div> -->
<img src="Headshot.jpg" width="400" class="img-responsive" alt="" align="right" data-aos="fade-right" data-aos-delay="0" />
Even if I use the pull pathname, the images still do not appear. Please note that they do appear if I just open the HTML file, but not while deployed. What am I doing wrong? Here is the website: https://evanmny.com
I'm not sure how you create/generate the HTML, but when I look at the network tab when loading your site in a browser I see it tries to read this URL:
https://evanmny.com/Users/evanmullen/Public/city.jpg
That should be:
https://evanmny.com/city.jpg
I am rather new to this so please forgive me if this is obvious or makes no sense. Basically I have not been able to find a way to embed a Instagram page's feed like you can with Twitter or Facebook. The only way I have found are by going through a third party site that either takes up the full page or is a monthly subscription. I am trying to have a html file with a script that pulls a set of 2 links from a google spreed sheet or google doc and uploads them into a link and image tags with out having to go in and modify the HTML file every time. I am current taking the source link from instagram and the image link and creating a linked image with them. I am then displaying that file in a iframe. This was my attempt at a hopefully simple work around and would like to know if it is possible. This is what I currently have as the basic set up.
<a target="_parent" href="##link##">
<img class="image" src="##link##" style="height:auto; width:100%;">
</a>
My thought process was that if I could connect either a google sheet or doc I could use a script with something like this.
<a id="1" target="_parent" href=""><img id="1" class="image" src="" style="height:auto; width:100%;"></a>
<a id="2" target="_parent" href=""><img id="2" class="image" src="" style="height:auto; width:100%;"></a>
<script>
var linkA = a, linkB = b, L2=1, L1=1;
for(a=0; a<100; a++){
document.getElementById(L1).src = [A(L1)]; //not sure if this is the proper way to locate the coordinates from the sheet
L1++;}
for(b=0; b<100; b++){
document.getElementById(L2).href = [B(L2)];
L2++;}
</script>
The issue I have run into is how to get the data from the sheet and then the proper way to use the data in a script to run have it replace the links. Ideally I would be able to simply add the two links into the sheet and the script would load them on to the page next time it loads.
I have searched everywhere for an answer and cannot find one. For some reason, in my HTML document, an image will display when opened from my browser fine. But when I upload my site to a server host this one specific image won't show.
Code:
<html>
<body background="images/background.jpg">
<img src="images/pp_4.png" style="float:left" vspace=50>
<center><img src="images/logo.png"></center>
<hr color="pink">
<style>
#font-face{
font-family:"chococookie";
src:url("font/choco_cookie.ttf")
}
p{font-family:chococookie;
font-size: 100%; }
</style>
<!---------------------------------------------------------------------------------->
<center><img src=""></center>
<center><p></p></center>
<center><img src=""></center>
<center><p></p></center>
<center><img src=""></center>
<center><p></p></center>
<center><img src=""></center>
<center><p></p></center>
<center><img src="images/image_226.jpg"></center>
<center><p>Love Live! gone sexy. #anime #sexy #ecchi #lovelive #bikini #chan #tyan #girl #kawaii #cute - 22 Oct at 10:48 pm</p></center>
<!---------------------------------------------------------------------------------->
<hr color="pink">
<center><img src="images/more_images.png" /></center>
</html>
I have tried resizing the image, and many other things, but nothing worked. The image not displaying is pp_4.png.
Make sure that image's name uploaded to your server matches name that you have written in your code. I mean, check for uppercase and lowercase letters, as far as you are probably using Windows that doesn't care about letters register. Your server might be using Linux that does care about it
First you need to make sure the image was uploaded to the server successfully. Try accessing that image without using your HTML code. For example, if your domain is www.example.com and your images directory is in the root folder, you should be able to access images from URLs such as:
www.example.com/images/image_226.jpg
Try to access the image you are referring to by using www.example.com/images/pp_4.png. You need to know where you are placing your images and if they have been uploaded successfully to the server. Then use your HTML code to access those images and it should work.
I have a new web space from the host I use to work with, and it works perfect, but I have a problem with the images displayed:
This is my index.html code:
<html>
<head>
</head>
<body>
Image in folder
<img alt="Smiley face" src="folder/img1.PNG"></img>
<br>
<br>
<br>
<br>
<br>
Image outside folder
<img alt="Smiley face" src="img2.PNG"></img>
</body>
</html>
The image inside the folder is not displayed.
I use WS_FTP, and inside public folder I have:
- index.html
- img2.PNG
- folder (inside this I have img1.PNG)
Any ideas? I use to create web pages and this is the first time this happens to me.
Thanks
Check the folder pesmissions in your server, maybe your site can not access to this folder.
I found the answer:
In the WS_FTP I had the radio button of ASCII files selected, instead of binary. I changed, upload again the images and it works!!
<body style="background-color: paleturquoise">
<h2 style="color: red">Duke's soccer League: Home Page<br/></h2>
<ul style="list-style-type: circle">
<li style="font-size: larger">All Leagues list</li>
<li style="font-size: larger">Register for a League (TBA)<br/><br/></li>
</ul>
<h2 style="color: red">League Administrator</h2>
<ul style="list-style-type: square">
<li style="font-size: larger">Add a new League (TBA)</li>
<img src="C:\Users\VIRK\Desktop\66.jpg" width="400" height="400" ></img>
</ul>
</body>
I am currently practice with JSP and I try this html code to make a web page on NetBeans IDE 7.0 but when I'm build and run the page no error in code but the image is not showing in the browser.
Edited:
Here I have given the screenshot of the NetBeans IDE where you can see the image is existing in Web-INF folder and the index.jsp page too and I tried with "/" before the image name but it won't work. The exact path of my project is C:\Users\VIRK\Documents\NetBeansProjects\practiceJSP .
<img src="/66.jpg" width="400" height="400" ></img>
I find out the way how to set the image path just remove the "/" before the destination folder as "images/66.jpg" not "/images/66.jpg" And its working fine for me.
You put inside img tag physical path you your image. Instead of that you should put virtual path (according to root of web application) to your image. This value depends on location of your image and your html page.
for example if you have:
/yourDir
-page.html
-66.jpg
in your page.html it should be something like that:
<img src="66.jpg" width="400" height="400" ></img>
second scenario:
/images
-66.jpg
/html
page.html
So your img should look like:
<img src="../images/66.jpg" width="400" height="400" ></img>
Your path should be like this : "http://websitedomain//folderpath/66.jpg">
<img src="http://websitedomain/folderpath/66.jpg" width="400" height="400" ></img>
I don't know where you're running the site from on your computer, but you have an absolute file path to your C drive: C:\Users\VIRK\Desktop\66.jpg
Try this instead:
<img src="[PATH_RELATIVE_TO_ROOT]/66.jpg" width="400" height="400" />
UPDATE:
I don't know what your $PROJECTHOME is set to. But say for example your site files are located at C:\Users\VIRK\MyWebsite. And let's say your images are in an 'images' folder within your main site, like so: C:\Users\VIRK\MyWebsite\images.
Then in your HTML you can simply reference the image within the images folder relative to the site, like so:
<img src="images/66.jpg" width="400" height="400" />
Or, assuming you're hosting at the root of localhost and not within another virtual directory, you can do this (note the slash in the beginning):
<img src="/images/66.jpg" width="400" height="400" />
all you need to do is right click on the jsp page in the browser, which might look like "localhost:8080/images.jpg, copy this and paste it where the image is getting generated
I had same kind of problem in Netbeans.
I updated the image location in the project and when I executed the jsp file, the image was not loaded in the page.
Then I clean and Built the project in Netbeans. Then it worked fine.
Though you need to check the image actually exists or not using the image URL in the browser.
I had a problem where the images would not show and it wasn't the relative path. I even hard coded the actual path and the image still did not show. I had changed my webserver to run on port 8080 and neither
<img src="c:/public/images/<?php echo $image->filename; ?>" width="100" />
<img src="c:/public/images/mypic.jpg" width="100" />
would not work.
<img src="../../images/<?php echo $photo->filename; ?>" width="100" />
Did not work either. This did work :
<img src="http://localhost:8080/public/images/<?php echo $image->filename; ?>" width="100" />
do not place *jsp or *html in root folder of webapp and images you want to display in same root folder browser cannot acess the image in WEB-INF folder
I also had a similar problem and tried all of the above but nothing worked.
And then I noticed that the image was loading fine for one file and not for another. The reason was: My image was named image.jpg and a page named about.html could not load it while login.html could. This was because image.jpg was below about and above login. So I guess login.html could refer to the image and about.html couldn't find it.
I renamed about.html to zabout.html and re-renamed it back. Worked.
Same may be the case for images enclosed in folders.
the easy way to do it to place the image in Web Content and then right click on it and then open it by your eclipse or net beans web Browser it will show the page where you can see the URL which is the exact path then copy the URL and place it on src=" paste URL " ;
If we are using asp.net "FileUpload" control and want to preview image before upload we can use below code.
<asp:FileUpload ID="fileUpload" runat="server" Style="border: none;" onchange="showpreview(this);" />
<img id="previewImage" src="C:\fakepath\natureImage.jpg">
<script>
function showpreview(Imagepath) {
var reader = new FileReader();
reader.onload = function (e) {
$("#previewImage").attr("src", e.target.result);
}
reader.readAsDataURL(Imagepath.files[0]);
}
</script>
Another random reason for why your images might not show up is because of something called base href="http://..." this can make it so that the images file doesn't work the way it should. Delete that line and you should be good.
You need to import your image from the image folder.
import name_of_image from '../imageFolder/name_of_image.jpg';
<img src={name_of_image} alt=''>
Please refer here.
https://create-react-app.dev/docs/adding-images-fonts-and-files -
The folder names in the path should not contain the space
write fullstack /asset/image.jpg instead of full stack/asset/image.jpg