In my home.blade.php page I have some authorization codes and in another <div> I placed image tag to display images, it worked fine but now I cannot see those images.
home.blade.php
<div class="row pt-5">
<div class="col-4">
<img src="images/aa.jpg" alt="" class="w-100">
</div>
<div class="col-4">
<img src="images/bb.jpg" alt="" class="w-100">
</div>
<div class="col-4">
<img src="images/cc.jpg" alt="" class="w-100">
</div>
</div>
and this is the error I get
Failed to load resource: the server responded with a status of 404 (Not Found)
also show these messages
Download the Vue Devtools extension for a better development experience:
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
I'm not sure, but maybe you just need to use the absolute path?
<div class="row pt-5">
<div class="col-4">
<img src="/images/aa.jpg" alt="" class="w-100">
</div>
<div class="col-4">
<img src="/images/bb.jpg" alt="" class="w-100">
</div>
<div class="col-4">
<img src="/images/cc.jpg" alt="" class="w-100">
</div>
</div>
Related
The video is not playing when I try to access the home page. But if I open another page and click on home page again, this time the video is playing. Overlay text is not showing. There is some padding available from top to the banner.
I am expecting video with overlay text without any space from Top.
Please tell me valid code to play video banner with above issue fixed. Every time I have to go to another page to play the home banner video.
Reference screencast: https://www.screencast.com/t/SgSaciVYkAT
Following are the mentioned codes:
<!-- BANNER
================================================== -->
<div class="top-position z-index-1 banner2">
<div class="d-flex align-items-center position-relative min-vh-100 bg-white bg-img primary-overlay cover-background" data-overlay-dark="7">
<video width="100%" height="100%" autoplay control loop>
<source src="video/digital-marketing-company.mp4" type="video/mp4">
</video>
<div class="container">
<div class="row align-items-center justify-content-center text-center">
<div class="col-12 caption">
<h3 class="subtitle">Our Growth Business</h3>
<h1 class="banner-headline clip">
<span class="blc text-white d-block">Get World Class Best</span>
<span class="banner-words-wrapper highlight mx-auto">
<b class="is-visible">Solution</b>
<b>Services</b>
<b>Technology</b>
</span>
</h1>
<i class="ti-arrow-right icon-arrow before"></i><span class="label">Get Started</span><i class="ti-arrow-right icon-arrow after"></i>
<i class="ti-arrow-right icon-arrow before white"></i><span class="label">Contact Us</span><i class="ti-arrow-right icon-arrow after"></i>
</div>
</div>
</div>
</div>
</div>
I have this in view. It is able to upload alright but it won't show. Is there anything more I should add?
<div class="col-md-4">
<img class="img img-fluid img-thumbnail" src="/storage/profile_images/{{$profile->profile_image}}"/> </div>
here is my show.blade.php file
<div class="col-md-4">
<img class="img img-fluid img-thumbnail" src="/storage/profile_images/{{$profile->profile_image}}"/></div>
Here is the player.blade.php file:
#if(count($players) > 0)
<?php $index = 0; ?>
#foreach($players as $player)
<div class="col-md-4">
<div class="card mb-1" style="width:300px">
<div class="card-body">
<img class="img img-fluid img-thumbnail" style="height: 170px; width: 350px" src="/storage/profile_images/{{$player->profile_image}}">
</div>
<div class="card-footer">
<div class="row justify-content-center">
{{$names[$index]}}<br>
</div>
<div class="row">
<div class="col-10">
<span class="h6">Team: {{$player->current_fc}}</span><br>
<span class="h6">Position: {{$player->position}}</span><br>
</div>
</div>
</div>
</div>
</div>
<?php $index++; ?>
#endforeach
<div class="col-12 mt-3">
{{$players->appends(request()->input())->links()}}
</div>
#else
<p>No Players available</p>
#endif
Follow above your image issue will be resolved:
Step 1:
Delete storage folder from public
Step 2:
Inside your project run this command
player.blade.php
php artisan storage:link
Step 3:
Replace or change as per this:
show.blade.php
<div class="col-md-4">
<img class="img img-fluid img-thumbnail" src="{{ url('storage/profile_images/.$profile->profile_image) }}" /></div>
Step 4:
Replace or change as per you required:
#if(count($players) > 0)
<?php $index = 0; ?>
#foreach($players as $player)
<div class="col-md-4">
<div class="card mb-1" style="width:300px">
<div class="card-body">
<img class="img img-fluid img-thumbnail" style="height: 170px; width: 350px" src="{{ url('storage/profile_images/.$profile->profile_image) }}">
</div>
<div class="card-footer">
<div class="row justify-content-center">
{{$names[$index]}}<br>
</div>
<div class="row">
<div class="col-10">
<span class="h6">Team: {{$player->current_fc}}</span><br>
<span class="h6">Position: {{$player->position}}</span><br>
</div>
</div>
</div>
</div>
</div>
<?php $index++; ?>
#endforeach
<div class="col-12 mt-3">
{{$players->appends(request()->input())->links()}}
</div>
#else
<p>No Players available</p>
#endif
You can use the asset function like in the example below:
#php
$imgUrl = '/storage/profile_images/'.$profile->profile_image;
#endphp
<img class="img img-fluid img-thumbnail" src="{{ asset($imgUrl)}}"/>
Also make sure that the storage is linked using the following command:
php artisan storage:link
I want to make a slider dynamic in the Php Laravel framework. there is 4 image that is sliding, title and description are fixed on each sliding...
View:-
<div id="slider" class="nivoSlider">
#foreach($sliders as $slider)
<div class="aaa">
<img src="{{ asset('/uploads/')}}/{{$slider->background_image }}" data-thumb="{{ asset('/uploads/')}}/{{$slider->background_image }}" alt="" height="615px" width="1263px">
<div class="pra">
<h1>{{$slider->title}}</h1>
<p>{{$slider->description}}
</p>
<div class="btn-1">
Contact US
</div>
</div>
</div>
#endforeach
`
Controller:-
public function index(){
$sliders=home1::all();
return view('User.userdashboard',compact('sliders'));
}`
Route:-
Route::get('/',['as'=>'construction','uses'=>'User\UserController#index']);
Actual Design of slider:-
<div id="slider" class="nivoSlider">
<div class="aaa">
<img src="images/banner-1.jpg" data-thumb="images/toystory.jpg" alt="" />
</div>
<div class="aaa">
<img src="images/banner-2.jpg" data-thumb="images/up.jpg" alt=""/>
<div class="pra">
<h1> The Best Business Support</h1>
<p>
Preparing your money is a daunting challenge for today's investors.</p>
<div class="btn-1">
Contact US
</div>
</div>
</div>
<div class="aaa">
<img src="images/banner-3.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
</div>
<div class="aaa">
<img src="images/banner-4.jpg" data-thumb="images/nemo.jpg" alt="" />
</div>
</div>
`
I don't understand where to start the foreach loop so that only images are slide
when I add another data from admin panel with column 'image','title', 'description'
the images are showing perfectly but title and description are overwrite
please help me in sorting out this problem
actually in your controller you get a collection under $sliders variable. $sliders=home1::all();.
You said that your home1 Model have some columns like 'image', 'title', 'description'.
So in your blade file you are getting $sliders because the compact('slides') instruction.
In that way your should be able to loop through $slidersjust like as you are referencing in your question:
#foreach ($sliders as $slider)
<div class="aaa">
<img src="{{ asset('/uploads/')}}/{{$slider->background_image }}"
data-thumb="{{ asset('/uploads/')}}/{{$slider->background_image }}"
alt="" height="615px" width="1263px">
<div class="pra">
<h1>{{$slider->title}}</h1>
<p>{{$slider->description}}</p>
<div class="btn-1">
Contact US
</div>
</div>
</div>
#endforeach
Here $slider contains each object from $sliders collection so you should see its own title and description alongside the image field.
You could test what $sliderscontains by dumping the collection in your blade file, using {{ dd($sliders) }}.
Regards.
I am using Github as SCM & have enable auto-deploy on Heroku. I am trying Heroku for a simple HTML, CSS, JS app & Used PHP for deployment. All my images are available in Git, relative path given for images is also correct. Still some of the images are not reflecting on page & giving 404 whereas most of them do appear. What can be it's reason?
Here's code snippet
.bgimg1 {
background-image: url('images/Top_Image.jpg');
}
<body class="background">
<div class="loader"></div>
<div class=" bgimg1">My top content </div>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/1.jpg" alt="img" height="50%" width="100%">
</div>
<div class="item">
<img src="images/2.jpg" alt="img" height="50%" width="100%">
</div>
</div>
</body>
and here is project structure.
Make sure you reference the correct images, watch out for lower/upper case:
You are referencing *.jpg (lower case) in your html when the filenames really are .JPG (upper case).
Corrected code:
.bgimg1 {
background-image: url('images/Top_Image.JPG');
}
<body class="background">
<div class="loader"></div>
<div class=" bgimg1">My top content </div>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/1.JPG" alt="img" height="50%" width="100%">
</div>
<div class="item">
<img src="images/2.jpg" alt="img" height="50%" width="100%">
</div>
</div>
</body>
I have the following code:
<div class="container-fluid>
{files}
<div class="media">
<div class="media-left">
<img src="<?php echo base_url('files/{filename}'); ?>" alt="afbeelding" class="media-object" style="width:200px">
</div>
<div class="media-body">
<h4 class="media-heading">{title}</h4>
<p>{text}</p>
</div>
</div>
<br>
{/files}
</div>
The current result is just the title and text being shown, without the image. When I remove the whole div with class "media-body", the image shows. I think my code is structured right, I followed the w3-schools example. How can I get both the image and text to show up in the bootstrap media format?
Missing "
Change from
<div class="container-fluid>
to
<div class="container-fluid">