I have embedded a gif image from imgur in a laravel project. While any external jpeg, png link perfectly displays on the blade, whenever I replace with gif it gets broken. I am using xampp local server.
code snippet
<div class="card mb-3">
<img src="https://i.imgur.com/juuaqEg.gif" alt="Imgur" class="card-img-top" style="width:100%;height: 30vw; object-fit:cover; " alt="...">
<div class="card-body">
<h5 class="card-title">List of Students</h5>
<p class="card-text">This is a comprehensive panel for student management. Click buttons to make changes.</p>
</div>
</div>
I replaced the imgur link with a static jpeg/png image link and there is no problem to render. Don't laravel allow animated gif from external links?
Try this:
<div class="card mb-3">
<img src="{{ URL::asset('https://i.imgur.com/juuaqEg.gif') }}" alt="Imgur" class="card-img-top" style="width:100%;height: 30vw; object-fit:cover; " alt="...">
<div class="card-body">
<h5 class="card-title">List of Students</h5>
<p class="card-text">This is a comprehensive panel for student management. Click buttons to make changes.</p>
</div>
</div>
else try downloading the gif in public folder (of your proyect) and calling
<img src="./nameOfTheFile.gif" alt="Imgur" class="card-img-top" style="width:100%;height: 30vw; object-fit:cover; " alt="...">
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>
Actually i have table in database named products where i have two photos sections. And photos, both are uploading in database with no problem but, one is not coming on site. also i checked the variable and it is not empty and also database is not empty! and here is my code
<div id="product-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner bg-light">
<div class="carousel-item active">
<img class="w-100 h-100" src="../../storage/app/public/product/{{$product->file_path}}" alt="Image">
</div>
<div class="carousel-item">
<img class="w-100 h-100" src="../../storage/app/public/product/{{$product->file_path2}}" alt="Image2">
</div>
</div>
You can try this
Run command to check : php artisan storage:link
<img class="w-100 h-100" src="{{ asset('storage/product/' . $product->file_path) }}" alt="Image">
Laravel doesn't show the image if it's concatenated with another image. I'm using Laravel 5.6. Any solution?
<div class="card-img mt-2 mb-2">
<img src=" {{URL::to('images/' . $value->file)}}" class="position-static img-fluid rounded" height="300px" width="200px" alt="">
</div>
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>
Basically short information about this situation :
I have a slideshow like this
enter image description here
And front-end developer didn't find the easiest solution so here is the front-end code for background images :
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 less_spacing"> <img src="{{ url('/dd/img/img/ss/4.jpg') }}"> </div>
<div class="col-sm-6 less_spacing"> <img src="{{ url('/dd/img/img/ss/2.jpg') }}"> </div>
</div>
</div>
and here for the centre image :
<div class="item" style="background: url(/dd/img/dd/what/1.jpg) center; background-size:cover;">
<img src="{{ url('/dd/img/dd/what/1.jpg') }}" class="img-responsive hidden-lg hidden-sm hidden-md">
<span class="sml-logo"><img src="{{ url('/dd/img/sml-logo.png') }}" alt=""></span>
<div class="caption left_panel">
<div class="inner">
<p>... The key of the door that will open you to the world of gastronomy and history of modern Baltic cuisine, blending international tendencies and interesting selections of wine.</p>
</div>
</div>
</div>
How you can understand here there is 4 images in this example : the last is 4th.
The centre image is with ID : 1;
I can't make this just based on the ID's from the database because if user will delete some results then +1 -1 will not work for previous and the next image.
Summed up : Basically all I want in this situation is when user clicks on next image the background (left) image changes to the previous centre image and the background(right) side image changes to the next image (3rd) and so on...