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.
Related
I am trying to make my logo clickable to go back to the homepage but can't seem to get it to work.
Any help appreciated...
<!-- logo begin -->
<div id="logo">
<a href="index.html">
<img class="logo logo_dark_bg" src="images/logo.png" alt="/">
<img class="logo logo_light_bg" src="images/logo_light.png" alt="/">
</a>
</div>
<!-- logo close -->
Your anchor currently work only from the root so you should update your reference to be from the root as well, so href="/index.html" note the starting "/". The Same applies to your src links:
<div id="logo">
<a href="/index.html">
<img class="logo logo_dark_bg" src="/images/logo.png" alt="logo">
<img class="logo logo_light_bg" src="/images/logo_light.png" alt="logo">
</a>
</div>
Starting an anchor link with a / means it sources from the root so that wherever the above code is based (such as in site.com/currentfolder/file.html) it will always connect with your home page which would typically be found in site.com/index.html.
Currently (without the leading /) the anchor link is looking for site.com/currentfolder/index.html which is almost certainly looking for a file which is not the welcome or home page.
Update
Also you need to ensure that the home page file does actually exist. Typically in your case the home pages may be /index.htm rather than /index.html. Please ensure that the file with the correct filetype HTML reference (.html or .htm) exists and is referenced correctly.
Summary Issues
Anchor href file should be absolute reference starting with /
Anchor href file must exist, with the correct filetype (.html or .htm, etc.).
image src should be absolute reference (starting /).
image alt should be the website name and/or logo description.
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
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
I want to know how I can link to a video using a thumb of a image from one page to another.
For instance if I wanted to link to the page only from one page to another I would simply put
<img src="theotherpage.html" />
But that doesnt quite do the job for me. I need to link to the video directly.
How can I do that?
Just wrap the image with <a> tag
<a href="link-to-direct-video">
<img src="image-thumb-src" />
</a>
If I understand your question correctly.
If you want to link to a page with one video, use YardenST's answer. If you want to link to a page with many videos, but you want to scroll to that video you can use an anchor.
On the videos page, say you have the following HTML:
<div id="video1"> ... </div>
<div id="video2"> ... </div>
If you wanted to link to the second video, you could use
<a href="/videos.html#video2">
<img src="image-thumb" />
</a>
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.