I am currently making a Meteor website with multiple pages and using IronRouter to have my /client/main.html display a page frame and import several HTML templates located in /imports/ui. I have an HTML <img> element located inside one of the templates-- /imports/ui/home.html.
Where do I need to put the image file and what do I need to put as the href= to find the image properly?
I have already tried both using a /public directory, and putting the image in the /imports/ui file and then trying to link to it with both the image name itself (as if the template were calling the image from its own folder) and using /../imports/ui/image.jpg as if main.html (the page with the frame and Ironrouter links) were calling the image file.
Put your image file (e.g., image.png) in /public.
Use <img src="/image.png"/> in your html (note: img tags use src not href attributes -- an easy mistake to make).
More details here.
Related
I'm new to coding. Currently working on a digital resume. I'd like to add a background image in CSS without using a url. The image is located in my project file.
I have tried to load the image in chrome and I took the url from that to css, but it didn't load. Any help? Thanks
Maybe your CSS file is not in the same directory as your image, you may need to use relative path URL, here I'll show an example:
Example directory arrangement
If your CSS file is inside the css folder, and your image is inside the img folder,
then you need to write your URL in your CSS file this way:
background-image: url("../img/your-background.png");
I'd say it be easiest if you used CSS to add the background image to your HTMl element. You can either use inline styles or create a css class in a separate file that you import in your HTML file.
https://www.w3schools.com/cssref/pr_background-image.asp
An example for this would be:
HTML:
CSS:
Make sure you use the relative path to your image file. Otherwise it will not load.
Otherwise you could use the HTML image tag:
https://www.w3schools.com/tags/tag_img.asp
I have an html file in which I would like to display an image called plot.png with the line <img src="plot.png" alt="Stock price vs. predictions graph">. On my website, I only see the alt text, meaning that my image did not load properly. In my command prompt output I see that I have a get request to /mysite/home/AAPL/plot.png, which is extremely frustrating because this means that when I search for the image this code is just placing it in the url (which is localhost../mysite/home/AAPL). I have tried putting plot.png in the same working directory as my html file as well as trying the absolute path to plot.png starting with C:, but nothing seems to get the search out of the url. Please help, thanks!
If it helps, im using Django
You can put the image in the same working directory (in the same folder as your html file) and then use
<img src="./plot.png" alt="Stock price vs. predictions graph">
The "./" is important as it signals that the image is in the current folder.
You could also use a website like www.linkpicture.com to generate a link to host your image and then use that link in your img
Some web browsers automatically disable images from loading. Fixing this could be as simple as selecting “show all images” from the browser's settings menu. It's also worth checking if the device you're using has security software or extensions that could block images.
Again you can use this tag for .png type photo
<img src="exampel.end">
//use extension type .end instead of .png
I forgot to mention that I was using the Django framework and the html templates work much differently than regular html files do. In Django you must put the image in a static folder and then call if with Jinja like so: <img src="{% static 'mysite/image.PNG' %}">
I am having difficulty getting my html image to appear on my web page. My image is in a file folder called images. I am practicing on jsfiddle and notepad and I cant' get the image to appear on either of them. My photo is in an file folder called images. I have tried using and it doesn't work. What step am I missing?
When I try to upload an image file form my computer in my html file it doesn't show up in browser. But if I link a image file from the web it works. I've copied the file path correctly and made sure the extensions were correct. Is it something wrong with the file itself?Code In Question
In the picture you've attached you're placing an absolute filepath inside src while it should be relative, considering the file might be in the same folder as the HTML, but not in the same user folder/operating system etc.
To fix your issue I have an example below.
Folder layout:
website
index.html
images
myimage.jpg
Referencing:
How to reference to myimage.jpg relatively is by putting images/myimage.jpg inside the src attribute. The way you're doing it is website/images/myimage.jpg, but another user might not have the website in a folder called website but website2 for example.
I've developed a custom HTML homepage for my prestashop site, but it seems I do not know how to incorporate it, I've tried looking into the prestashop forums, but all it shows are for .tpl files, is there a way for me to link them to the homepage?
Can I just link it as an html page or do I really need to put it inside a tpl page for it to work?
Create your .html file (say 'test.html).
In test file you need to
add these lines of code before your html code
<?php
include(dirname(__FILE__).'/config/config.inc.php');
Tools::displayFileAsDeprecated();
include(dirname(__FILE__).'/header.php');?>
Also add these lines after your html code
<?php include(dirname(__FILE__).'/footer.php');?>
Place the test.html file in the public_html folder.
Now you need to add the page to link with your site.
If it is home page you need to add it to index.php otherwise you can just add the url (http://mysite/test.html) to menu bar or footer links, where ever you want to put it.
I have placed my php page link in the footer information part using anchor tag as shown in the image
In prestashop you can find "Home Editorial" module, in this module you can put your html obviously the module need to be transplant in displayHome position.