I tried to display an image in my github blog post(which I created using jekyll):
<img src = "./images/scatterplot.png" width="400" height="300" />
The image gets displayed in the markdown file but fails to output in the actual blog.
Any suggestions would be really helpful, thanks in advance !
As mentioned in one of the replies, I tried to open the image link : https://surajsubramanian.github.io/posts/simple-linear-regression-from-scratch/images/scatterplot.png
This is strange, why does it take the name of my post in the path.
The path should have been https://surajsubramanian.github.io/posts/images/scatterplot.png
here the correct link for the img:
https://raw.githubusercontent.com/SurajSubramanian/SurajSubramanian.github.io/master/_posts/images/scatterplot.png
To know the URL of a picture on the web browser (right click on the picture -> open the picture in new tab and you get thre right URL)
The img will be like that:
<img src="https://raw.githubusercontent.com/SurajSubramanian/SurajSubramanian.github.io/master/_posts/images/scatterplot.png" width="400" height="300" />
Related
I set up a server, am trying to load a picture on the web page, I get the alt tag to show up but the picture will not load. I have the picture in file structure '/templates/images/pic' . I have the src tag defined as '/images/pic' but it will still not load Is this an environment problem?
I have tried moving the picture into the folder with the html files and changing the src tag but still nothing
html
<img src="/mymodules/images/computer"
alt="HTML5 Icon"
name="pic"
style="width:128px;height:128px;">
python code for homepage
#app.route('/',methods=['POST','GET'])
def home() -> 'html':
return render_template('entry.html', page_title='Logica1 Err0r')
I have got the 404 error every time
I think I see your problem.
You need the WHOLE path of the image.
if you say the name of the image is pic, then your code should be
<img src="/mymodules/images/computer/templates/images/pic.jpg" alt="HTML5 Icon" style="width:128px;height:128px;>
Hope this helps! If it is still not working, I'll reformat my answer because the way you have your image path isn't that clear to me, but I'll figure it out.
I've composed an email in HTML that has an image in it.
The image "src" attribute has a URL pointing to a controller action endpoint on my server (ASP.Net) which returns a FileContentResult.
An example of the img tag looks like this:
<img src="https://www.mywebsite.com/controller/action?argument=value" width="600" height="300" alt="HeadingImage" title="HeadingImage">
The email displays as expected in Outlook.
If I take the source from Outlook and just view it in Chrome desktop, it still works fine.
If I visit the img URL in Chrome the image is downloaded.
However, if I view the email in Gmail the image does not display. Why might this be the case?
I get a single error in the console looking something like this:
ci6.googleusercontent.com/proxy/<SNIP>https://www.mywebsite.com/controller/action?argument=value GET https://ci6.googleusercontent.com/proxy/<SNIP> 404 ()
Hi you can use this it's work for me
Including the scheme in the src url (using "//" does not work - use full scheme EG: "https://")
Including width and height attributes
Including style="display:block" attribute
Including both alt and title attributes
Just add http:// in image src
<img src="http://www.mywebsite.com/controller/action?argument=value" width="600" height="300" alt="HeadingImage" title="HeadingImage">
First You need to add that image on your deployed project folder and then you need to specify the path of your Image :
<img src="http://www.mywebsite.com/Images/YourImage.png" />
Cheers !!
I found a photo in www.w3schools.com. In that server i can access it by using simple html tag. It's src = "smiley.gif". I want to access the photo in www.practiseboard.com. I have no clue how to do that. Please help.
Right click on the image and copy it URL:
Chrome: Copy image URL
Safari: Copy image address
Firefox: Copy image location
Then use that URL in your img tag.
<img src="http://www.w3schools.com/tags/smiley.gif" alt="Smile">
Demo: https://jsfiddle.net/4v1az6rx/
Use full URL and dont forget http://
if the target site prevents hotlink, you can not display it inside your website.
<img src="http://www.practiseboard.com/smiley.gif">
May be this is what you are looking for!
<img src="http://www.w3schools.com/html/pic_mountain.jpg"; alt="W3Schools.com" />
demo : http://www.practiceboard.com/4fbfc9fc
replace src with full url of the image as Ali said!
I am trying to use Addthis widget for my website.Right now I am using the following code to share image to different website.
<script>var addthis_config = {
services_overlay:'facebook,twitter,email,more'
}</script>
<div class='giveTopMargin'>
<a href='link' class='lightbox' title='title'>
<img class='addthis_shareable' src='img_url' addthis:url='img_url' addthis:title='message' />
</a>
</div>
What I want is that when the user clicks the share button for facebook.I need the image preview of the img_url I've mentioned and when this link is successfully shared on facebook I need whoever clicks on this post on facebook, he should be redirected to the main page of my website instead redirecting him to the img_url.
Right now the problem with this code is that it shows me the following share box.
As you can see it is showing me the img_url in the title and description instead of the things I've mentioned above that is the title message.If I change the img_url to the main page of my site then this will not show me the preview of the image I've shared.
I hope I am clear enough. Please let me know for any clearification.
Code Source : http://www.addthis.com/labs/photo-sharing#.USyj-jAyZjY
I was not able to solve the problem so I sent an email to the Addthis support and they said that facebook tries to catch the image preview from the url we mention.So I was not able to accomplish this using the Addthis Plugin.
So I end Up doing it myself by using the facebook.ui dialog to share with the settings I wanted.
I think all you need to do is change the value for addthis:url, so for example, if the site you want them to go to is http://www.supportmyidea.com, then your img tag should look like:
<div class='giveTopMargin'>
<a href='link' class='lightbox' title='title'>
<img class='addthis_shareable'
src='[your_image_url]'
addthis:url='http://www.supportmyidea.com'
addthis:title='Support My Idea' />
</a>
</div>
The image preview that Facebook shows is actually based on the URL you specify. Facebook scrapes that page and will show an image from the page - if you specify an og:image tag, Facebook will use that image. I hope this makes sense.
You don't have to use their format. Make your own image and url using an img tag and an a tag. All the URL has to be is this :
http://www.addthis.com/bookmark.php?url={url}
<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