Laravel 5.3 - 使用@extends& amp;显示公共文件夹中的图像的问题@sections [英] Laravel 5.3 - Issue displaying Images from public folder using @extends & @sections
问题描述
第二次更新：
出于某种原因，我的中的阻止了图像的渲染。 display：table; home.blade.php中的.header_table
更新：
我应该提到我正试图展示 @section中的图像（我喜欢称它们为部分）。当我去我的main.blade.php并做了 {{Html :: image（'images / max.jpg'）}} 链接时，它显示我的图像没有问题。
我现在的问题：
如何在@中显示图片部分（部分）？
project_name / public / images / max.jpg - 确认路径
views / pages /home.blade.php
@extends（'main'）
@section（'content '）
< title> Laravel< / title>
<！ - 字体 - >
< link href =https://fonts.googleapis.com/css?family=Raleway:100,600 =stylesheettype =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 / javascriptsrc ={{URL :: asset（'js / fade.js'）}}>< / script>
<！ - 样式 - >
< style>
.header {
身高：100％;
宽度：100％;
background-color :;
}
.header img {
宽度：500px;
}
.header_table {
display：table;
}
.table {
display：table-cell;
身高：100％;
宽度：100％;
padding-left：40px;
padding-top：40px;
}
。表h1 {
text-align：left;
颜色：白色;
font-family：'Raleway'，sans-serif;
字体大小：90px;
margin-top：2px;
}
。表p {
text-align：left;
颜色：黑色;
font-family：'Raleway'，sans-serif;
}
.button {
background-color：＃4CAF50;
border：none;
颜色：白色;
填充：15px 32px;
text-align：center;
text-decoration：none;
display：inline-block;
字体大小：16px;
保证金：0自动;
游标：指针;
margin-left：90px;
}
.animate {
padding-top：4em;
padding-bottom：4em;
}
.animate img {
position：relative;
}
.tablet {
身高：280px;
}
< / style>
< div class =container>
< div class =header header_table>
{{Html :: image（'images / max.jpg'）}}
< div class =table>
< div id =title>< h1>欢迎< / 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>了解详情< / button>
< button class =button>注册< / button>
< / div>
< / div>
< div class =animate>
< img class =tabletsrc =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'）}}>图库< / a>< / li>
< li>< a href ={{url（'about'）}}>关于< / a>< / li>
< li>< a href ={{url（'/'）}}>主页< / a>< / li>
< / ul>
< div class =container>
@yield（'content'）
< / div>
< / body>
上一页：
我只是想显示一个保存在我项目中的图像。
I紧随其后（
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
If you are using LaravelCollective's Html Facade, you have used an extra directory in your image path.
{{ Html::image('public/images/max.jpg') }}
Which should be:
{{ Html::image('images/max.jpg') }}
As Html Facade suppose you are inside the public directory and searches the image from the specified location.
Edit:
You are using: @extends('main')
It supposes you have a main.blade.php in your resources/views/main.
But you have your main.blade.php inside views/vendor/main.blade.php
You could try:
@extends(vendor.main)
Also you are doing something wrong. You are adding all the scripts and css from the child view to parent view.
When you are using in this format it renders to this form of your html.
Updated Example:
My views path:
|-resources
|- views
|- pages
|- home.blade.php
|- welcome.blade.php
welcome.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="flex-center position-ref full-height">
<div class="col-md-12">
<p>Image from Parent</p>
{{ Html::image('images/capture.png') }}
</div>
<div class="content">
@yield('content')
</div>
</div>
</body>
</html>
home.blade.php:
@extends('welcome')
@section('content')
<div class="col-md-12">
<p>This is a child view.</p>
{{ Html::image('images/capture.png') }}
</div>
@stop
routes/web.php:
<?php
Route::get('/', function () {
return view('pages.home');
});
I prefer using @stop instead of @endsection. You could try both to test it.
Hope it helps you. Not confirmed why the image is not rendered.
If it doesn't render could you add the content of <image src> from your browser?
Final Output:
这篇关于Laravel 5.3 - 使用@extends& amp;显示公共文件夹中的图像的问题@sections的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
