2nd Update:
For some reason the display: table;
in my .header_table
within home.blade.php was preventing the image from rendering.
UPDATE:
I should have mentioned that I am trying to display an image within a @section ( i like to call them partials)
. When I went to my main.blade.php and did the {{ Html::image('images/max.jpg') }}
link it displayed my image with no issue.
My questions now:
How do I display an image within a @section (partial)?
project_name/public/images/max.jpg - path confirmed
views/pages/home.blade.php
@extends('main')
@section('content')
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="{{ URL::asset('js/fade.js') }}"></script>
<!-- Styles -->
<style>
.header {
height: 100%;
width: 100%;
background-color: ;
}
.header img {
width: 500px;
}
.header_table {
display: table;
}
.table {
display: table-cell;
height: 100%;
width: 100%;
padding-left: 40px;
padding-top: 40px;
}
.table h1 {
text-align: left;
color: white;
font-family: 'Raleway', sans-serif;
font-size: 90px;
margin-top: 2px;
}
.table p {
text-align: left;
color: black;
font-family: 'Raleway', sans-serif;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 0 auto;
cursor: pointer;
margin-left: 90px;
}
.animate {
padding-top: 4em;
padding-bottom: 4em;
}
.animate img {
position: relative;
}
.tablet {
height: 280px;
}
</style>
<div class="container">
<div class="header header_table">
{{ Html::image('images/max.jpg') }}
<div class="table">
<div id="title"><h1>Welcome</h1></div>
<img src="{{asset('public/images/max.jpg')}}"></img>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<button class="button">Learn More</button>
<button class="button">Sign-Up</button>
</div>
</div>
<div class="animate">
<img class="tablet" src="https://designcode.io/cloud/ios9-ipad/ipad.jpg">
</div>
</div>
@endsection
views/vendor/main.blade.php
<body>
<ul>
<li class="logo"><img src="http://image.flaticon.com/teams/1-freepik.jpg"></li>
<li><a href="{{ url('gallery') }}">Gallery</a></li>
<li><a href="{{ url('about') }}">About</a></li>
<li><a href="{{ url('/') }}">Home</a></li>
</ul>
<div class="container">
@yield('content')
</div>
</body>
Previous:
I'm just trying to display an image that is saved within my project.
I followed this (https://laravelcollective.com/docs/5.2/html) to update my composer.json file and app.php. Ran composer update there after.
I've used :
<img src="public/images/image.jpg">
{{ Html::image('public/images/max.jpg') }}
{{ HTML::image('public/images/max.jpg') }}
{{!! Html(or HTML)::image('public/images/max.jpg') !!}}
Now:
{{URL::asset("public/images/max.jpg")}}
{{ Html::image('images/max.jpg') }}
and I keep getting that image icon, but no image. Similar to what this person experienced (Image not displaying in view. Laravel). When I try that answer's advice by doing the asset()
method, it doesn't work.
Any suggestions?
Edit: changed image.jpg to max.jpg
Edit: added new attempts
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…