So I am building a website with Django, and on the homepage I want to render an image that is always the same. Here is what I have tried. The pictures and the html file are in the same directory.
This is the html:
<div class="ui segment">
<div class="ui horizontal divider">
View the results
</div>
<img src="3.png" alt="View Results">
</div>
And this is a picture of my folder:
The image isn't showing up at all, I just get that small icon that you get when the image doesn't load.
Any help would be appreciated!
You don't put images in the templates directory. You put them in the static directory and refer to them via the {% static %} tag.
See the tutorial on static files.
Related
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="">
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 learning Foundation framework and I have some problems with my code. I am trying to output images for different devices (mobile, tablet and desk) but when i write my code (path to the images is correct - checked few times...) and try to view the outcome in localhost i cannot see my images on the screen. Lets say i go localhost/foundation and when i inspect dev. tools on chrome sub menu: Sources my IMG folder is not shown there but it is actually inside my foundation folder.
here is my code that I am trying to run:
<header>
<div class="row">
<div class="column">
<div class="logo" data-interchange="[img/logoS.png, (default)],[img/logoM.png, (medium)],[img/logoL.png, (large)]">test</div>
</div>
</div>
</header>
Example of my problem
So you can see that the folder Images is missing so I cannot add reference to it and output my images but actually the folder is in place...
In your print screen, your image folder is named as "images" and in your code is "img". Check this.
My code of footer view is like this :
...
<div class="col-md-4">
<img src="images/dwi.png" alt="Travel Agency Logo" />
</div>
...
I have a few pages. On the home page, the image appear. But on another page, the image does not appear. Whereas all pages using the same view footer.
Why the image only appears on the home page?
Thank you
Try using the asset function:
<img src="{{ asset(images/dwi.png) }}" alt="Travel Agency Logo" />
See: https://laravel.com/docs/5.1/helpers#method-asset
Add a slash (/) before images in img src. The image (I guess) does only load when the page is in parent folder (/) and that's exactly logic.
I'm trying to put up a logo for the web page of one of our repositories. I managed to place the logo on the base html as that code is used throughout the whole site, it just calls the html fragments from the directory depending on what the user clicked in the navbar.
The problem: It displays correctly in the home page (dashboard) but when you click on the other navbar items the image converts to an icon that I usually see when an image fails to load.
this is the site: http://dir.coe.upd.edu.ph/
<div class="image" style="position:absolute; padding: 5px;">
<img src="../static/css/images/logo.png" class="responsive-image">
</div>
<div style="background-color:#d07837;height:300px;width:100%;position:absolute;z-index:-10;"> </div>
<div class="container" style="margin-top:50px;">
<div>
<h1 class="page-title">{% block page_title %}{% endblock page_title %}</h1>
<div class="row-fluid">
<div class="span12 well content-box">
{% block body %}{% endblock body %}
</div>
</div>
</div>
I'm still currently editing the site and I noticed this problem. the site was constructed though codeigniter and bootstrap
Your image is at the location http://dir.coe.upd.edu.ph/static/css/images/logo.png
so your src attribute of image tag should be
<img src="/static/css/images/logo.png" class="responsive-image">
The html are not at the same levels so your src attribute of the img tag is wrong.
This is what chrome devtools shows on the different pages.
logo.png /static/css/images
logo.png /works/static/css/images <-- There is no image in this
folder. It should be in /static/css/images
One of them is not found because they are different. Try use the absolute path or change the location of your template.
Solution change your image tag to
<img src="/static/css/images/logo.png" class="responsive-image">
Have a look on image...Hope this help