I am working on a project with a file manager(dropbox like), and i am using handlebars template to show each file that i am uploading into a div.
the problem is that i want to show a preview of the file in the web page but at this moment only images are showing. is there any other tags i could replace img with?
<div class="file">
<a href="{{upload.url}}" target="_blank">
<span class="corner"></span>
<div class="image">
<img alt="image" class="img-responsive" src="{{upload.url}}">
</div>
i am trying to replace the img alt to show a preview of a file (pdf, text, ect)
I think you could use an iframe like this.
<iframe src="{{upload.url}}"></iframe>
Related
<div class="image1">
<img src="../images/Igbo Calendar.png">
</div>
<div class="image2">
<img src="../images/RCCG directory.png">
</div>
<div class="image3">
<img src="../images/Igbostudy quiz .png">
</div>
I uploaded my html, css and image files on Github. When I view the website on my Github page, the images do not show as they do locally, only as icons
I removed the dots and the forward slash before the 'images' to see if it helped, it did not. I searched similar questions here on Stackoverflow but the suggestions I applied did not solve the problem.
github page: https://ijeoma7.github.io/website-two/
Thanks for your time.
First, I would avoid using spaces in file names when it comes to the web--use dash (-) or underscores (_) if you want to separate words in file names. For example, try changing your html code and file names to the following:
<div class="image1">
<img src="../images/Igbo-calendar.png">
</div>
<div class="image2">
<img src="../images/RCCG-directory.png">
</div>
<div class="image3">
<img src="../images/Igbostudy-quiz.png">
</div>
Second, I would double check that the image relative paths and filenames you have specified is correct in the uploaded site. (Single ./ (or no prefix) represents the directory you are in, ../ represents the parent directory, ../../ represents the gradparent directory, and so on.)
you upload images directly you not upload images
so this "../images/Igbo Calendar.png" to "Igbo Calendar.png"
View
<div class="image1">
<img src="Igbo-calendar.png">
</div>
<div class="image2">
<img src="RCCG-directory.png">
</div>
<div class="image3">
<img src="Igbostudy-quiz.png">
</div>
would appreciate some help here, my img html tag has the correct file path. However, when I launch the express server and try to view the image on vscod Browser Preview, I cannot see it (example picture in the link below). What could be the problem?
<div class="dashboard"><!--Dashboard START-->
<section class="navigation"><!--Navigation START-->
<img src="imgs/iHome.png" alt="">
</section><!--Navigation END-->
This is a picture of the html file along with the directories on the left and the html img tag in the middle, and the Browser Preview with the missing image on the right
The App needs a src folder that has a sub folder assets. your Frontend js should be hosted in the src folder.
put your image in the src -> assets -> images/pic01.jpeg
then call it like this:
<img src="assets/images/pic01.png" alt="">
Code:
<div class="about-img">
<img src="https://ella.sice.indiana.edu/~macnaust/headshot.jpg" class="img-fluid rounded b-
shadow-a" alt="image not found">
</div>
When I open this as a file in my browser, I see the image just fine. But when I navigate to the published webpage, it is missing, and the alt text does not display either.
What am I doing incorrectly?
Try and remove the tilde and start over. Actually tilde '~' represents home directory. When you place tilde in url, It will access from home directory. So, put the picture in the macnaust/DevFolio/assets/img/ folder then change the src to
<img src="https://ella.sice.indiana.edu/macnaust/headshot.jpg" class="img-fluid
Try this: Change your code to below: If it works, then google up on relative vs absolute folder path.
<div class="about-img">
<img src="/macnaust/headshot.jpg" class="img-fluid rounded b-
shadow-a" alt="image not found">
</div>
I have a problem with Firefox browser and picture rendering in Grails web application.
Some of the pictures have "[" and "]" in filename. When I open web application in Chrome or Explorer, pictures are ok but not in Firefox.
My code looks like this:
GSP:
<img
src="${resource(dir:'documents/pictures',file:filename)}" alt="" />
Filename has square brackets.
I know that Firefox has problems with square brackets but is there a workaround?
Thank you.
Generated html:
<div class="col-md-6 product-image">
<div id="slikaTemp">
<br>
<a href="/application/static/documents/pictures/TETRIC_EVOCERAM__4ddb881283a15[1].jpg" title="">
<img src="/application/static/documents/pictures/TETRIC_EVOCERAM__4ddb881283a15[1].jpg" alt="" height="" width="450">
</a>
</div>
</div>
You can encode the filename so in your resource call, add something with java.net.URLEncoder.encode(filename) so the filename will be encoded
I've added a page link to a picture for my website, but it does not load the website because the link goes the directory therefore the webpages do not appear. My code is below:
<a href="www.w3schools.com">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
When I click on the image it says file not found.
If you're linking to a page on an external site, you will need to provide the entire URL of the page in question, which includes the protocol. In this instance, that would be http://www.w3schools.com/.
By linking to www.w3schools.com, you are telling the browser to load that URL relative to the page you're linking from so, if this link were on a page located at http://domain.tld/page.html, clicking on it would attempt to load http://domain.tld/www.w3schools.com.
Add http:// OR https:// for your website link:
<a href="http://www.w3schools.com/">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
<a href="http://www.w3schools.com" target="_blank">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
Without the http:// your link will be something like: youraddress/www.w3schools.com
And pay attention if you image is in the correct folder called Images