I have the following razor syntax to get the picture from controller (From database table):
<img src="#Url.Action("GetMainPicture", "Product", new { item.ProductID, #class = "img-responsive" })" height="300" width="230" alt="" />
Which works just fine i can get the images in <img> tags as you can see in above code.
Now in the template i downloaded it for my project i have this here below, which is a href styled with a button to zoom the image with fancy box:
Zoom
The code line above works if i give a straight forward path for the image (path for the image within a folder or something not database) but i can't get it working fetching the image from database and then show it on a fancy box which fancier.
Thank You!
EDIT: Not to forget the images are in the database table.
You have to put the full url there, without ../ I think
but now I would like to have a href (link) to that specific picture
how can I do it?
You just need to wrap your image inside a anchor tag.
<a href="someURL">
<img src="#Url.Action("GetMainPicture", "Product", new { item.ProductID, #class = "img-responsive" })" height="300" width="230" alt="" />
</a>
You can do like below. Set the href attribute of anchor tag (<a>) to where you want or what the operation you want to perform when user clicks on the picture.
<a href="#Url.Action("GetMainPicture", "Product", new { item.ProductID})">
<img src="#Url.Action("GetMainPicture", "Product", new { item.ProductID, #class = "img-responsive" })" height="300" width="230" alt="" />
</a>
<a href="#Url.Action("GetMainPicture", "Product", new { item.ProductID)">
<img src="#Url.Content(#item.image)" class="img-responsive " style="height="300" width="230"" alt="#item.ContName" />
</a>
i have used this approach to take the client to a new form where he gets all the detail about the product and this is working for me so it may help you
Use the image link and the Url.Content in razor like this example:
<img src="#Url.Content(item.Image)" alt="MyImage" />
or:
Load Image
Related
I am trying to add an image on html page but it doesn't appear
<img href="img/bg.jpeg" alt="welcom" />
everything seems to be fine what is wrong with code i test it many times
It test it on two browsers chrome 19 and firefox
I tried the same with another image extension but i doesn't work
<img href="img/2.png"/>
where is the problem
You're using the wrong attribute, instead of href you need to use src - the former is for links.
This would be the correct usage:
<img src="img/bg.jpeg" alt="welcom" />
The problem is just in: href the attribute
href attribute is for ancre link <a href="#">
<a href="directory">
The src attribute is for: img tag
<img src="directory"/>
and if you want to set a background with css you only have to add
background-image : url('directory');
Trust me its so easy to get confused by this stuff
So i suggest to change href attribute with src
<img src="img/bg.jpg" alt="Welcom" />
And it should work fine
You have to write
<img src="img/bg.jpeg" alt="welcom" />
istead of
<img href="img/bg.jpeg" alt="welcom" />
You need to use src not href to point to the image file name.
<html>
<img src="imagefilename.jpg">
</html>
This code will display an image with the filename imagefilename.jpg that is in the same directory as this html file
<img src="#" alt="Sorry the image could not be displayed.">
In the above code I want display an image in alt instead of text.In this way I want to display my site logo as image if it is unable to connect to internet.
Update:I am developing android application using Phonegap.
As stated in the comments - If your user doesn't have an internet connection, there's no way they can load a new image. However, if it's of any use to you and you wanted to load in placeholders for whatever reason.
You could do something like this with jQuery
I've set up a basic fiddle for you which is easy enough to understand.
Image With # Src
<img src="#" alt="no image" />
Variables to find # Src and to replace with placeholder
var noSrc = '#';
var noImg = 'http://placehold.it/400x500';
$('img[src="' + noSrc + '"]').attr('src', noImg);
Just change the path of the noImg variable to whatever your image path will be.
Working Example: Fiddle
<img src="#" alt="no image" />
$('img[src="#"]').attr('src', 'http://placehold.it/400x500');
Example without Variables: Fiddle 2
I'm using a custom theme based on "Contoso". I've edited the "Branding" file in my custom theme to show my logo:
#{
var homeUrl = Href("~/");
}
<h1 id="branding">
<a href="#homeUrl">
<img src="Themes/myTheme/Content/Images/logo.png" alt="Our Logo" />
</a>
</h1>
I can see the logo fine on regular pages. I've got a list of custom content items on one of my pages though, and when I click on the title of one of the content items in the list to show the details of the item, the logo at the top shows as a broken image... What would cause this?
Use
<img src='#Href("~/Themes/myTheme/Content/Images/logo.png")' alt='Our Logo'/>
Your img url path was not defined as relative to the root. More info here: http://brugbart.com/Articles/paths
This should also work: Notice the '/' at the beginning of the url
<img src="/Themes/myTheme/Content/Images/logo.png" alt="Our Logo" />
It is better to use
<img src="#Html.Content("~/Themes/myTheme/Content/Images/logo.png")" alt="Our Logo" />
Use ~/ as sugested, #Html.Content("~/...
The compiler tracks the route and makes the URL from the site root, ie, ~/ is replaced by the site's root.
<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
I have a picture, if I click onto that picture, how can I build an image reference so another page opens in a new tab or a new window of my browser displaying the picture?
<a href="http://www.google.com" target="_blank">
<img width="220" height="250" border="0" align="center" src=""/>
</a>
If you use script to navigate to the page, use the open method with the target _blank to open a new window / tab:
<img src="..." alt="..." onclick="window.open('anotherpage.html', '_blank');" />
However, if you want search engines to find the page, you should just wrap the image in a regular link instead.
<a href="http://www.google.com" target="_blank"> //gives blank window
<img width="220" height="250" border="0" align="center" src=""/> // show image into new window
</a>
See the code
Assuming you want to show an Image thumbnail which is 50x50 pixels and link to the the actual image you can do
Of course it's best to give that link a class or id and put it in your css
you can do like this
W3C Home Page
find this page
http://www.corelangs.com/html/links/new-window.html
goreb
To open in a new tab use:
target = "_blank"
To open in the same tab use:
target = "_self"
Try this simple solution
<a href="path/of/your/image/image.png" target="_blank">
<img src="path/of/your/image/image.png" alt=""
style="width: 37rem;max-width: 100%;height: auto;vertical-align:
middle;border-style: none;">
</a>
See live https://codepen.io/awaisaslampro/pen/abwOPrP
If the question is about to click on Image and open in New Tab like this
Here is the code:
<a href="assets/images/android-chrome-512x512.png" target="_blank">
<img width="220" height="250" border="0" align="center" src="assets/images/android-chrome-512x512.png" alt=""/>
</a>
Both the href and and src attributes values/URL's can be local for testing and incase of live site.. it should be live link to access