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
Related
<div id="Project" class="bg-white fnt-white brdr project-div ">
<div class="float-left image-for-project-container brdr">
<img src="{% static './Images/manworking.webp' %}" alt="manworking" height="630px">
</div>
{% for project in project_details %}
<div class=" project-container inline-block ">
<h2 class="text-center fnt-black head-portfolio">
{{project.project_name}}
</h2>
<br>
<br>
<p class="margin-auto txt-portfolio roboto hover-orange fnt-black">
{{project.project_details}}
</p>
<br>
Read More
</div>
{% endfor %}
</div>
Issue: The project container when receiving dynamic entries from Django model, creates multiple project containers as executed by the forloop. However, as evident from the image attached, as each project container is created, it is creating an unwanted upward indentation or margin successively. What am I doing wrong?
This is the HTML code. I do not think there is any requirement for my CSS stylesheet as when I view the HTML file without Django, it's absolutely alright. I have also attached an image to show the space that is being created. In case the Imgur is not being shown here is the link (https://i.stack.imgur.com/EnUUG.png).
Inline block's vertical-alignment is set to the text baseline, this is why the bottom text, the 'Read More' links line up. To make them align at the top, you will have to set vertical-align:top to the project-container class.
Trying to add the 4 dry out logo to this html template. Can anyone correct what I did wrong? It shows this on the site:
This is a very small section of the code where I have the image placed in the body.
<body>
<!-- Loader -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- Page Content -->
<div class="container-fluid tm-main">
<div class="row tm-main-row">
<!-- Sidebar -->
<div id="tmSideBar" class="col-xl-3 col-lg-4 col-md-12 col-sm-12 sidebar">
<button id="tmMainNavToggle" class="menu-icon">☰</button>
<div class="inner">
<nav id="tmMainNav" class="tm-main-nav">
<ul>
<!--ERROR IMG --> <img data-image="4 Dry Out Logo.jpg" alt="4 Dry Out Logo">
<li>
Unless there is other code acting on your img tag, you need to use the src attribute to specify an image URL. Spaces in the image name could also be causing an issue.
You'll want to open up your web browser's developer tools and see if you can see where the image is requested in the network tab. If the URL is returning a 404 error, you know that there is an issue with your image's path. If the request for the image isn't being made at all, then there is an issue with your img tag or the code that is supposed to cause the request for the image to be sent.
<img data-image="4DryOutLogo.jpg" alt="4 Dry Out Logo">
First you need to consider renaming the image and remove white space from the name.
Second , you have to use the code as below
<img src = "../yourimagename.jpg">
Finally ,
You have to make sure that your image exist with in the server path.
I suggest you to first open the image via url link , once its open copy paste that url into the src code .
Good luck
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.
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 creating a simple personal website (using jekyll), and I have a problem in the "About Me" page. Every page of the website (including the about-me page in question) has a header on the top and a footer at the bottom. In the "About Me" page, I want the middle content section to be split vertically, with some text on the left and my picture on the right.
To achieve that, my "about-me.html" has the following two divs:
<div class='about_content' id='about_left'>
...
</div>
and
<div class='about_content' id='about_right'>
<span style="margin:0 10px; float:right">
<a href="/assets/picture.jpg" title="Gautam">
<img src="/assets/picture.jpg" width="240" height="320" alt="Gautam"/>
</a>
</span>
</div>
The about-me text that I want to show is in a markdown file called "about-me.md", but all my attempts to show those contents in the "about_left" div defined above have failed :(
One option is for me to not use markdown for the about-me text, but instead write plain HTML in the "about_left" div. I don't like this option.
Another option is to not use the "about-me.html" file at all, but instead embed an image tag inside "about-me.md" as suggested in this answer. This sort of works, but the text and the image are then not in separate divs; due to which the text extends under the image -> something I'd like to avoid.
Is there a way for me to keep my "about-me.html" file with the two divs, but still show the text from my "about-me.md" file inside the "about_left" div?
You can do something like this in your HTML file where you want the content of the Markdown file to show:
{% capture about %}{% include about-me.md %}{% endcapture %}
{{ about | markdownify }}