Laravel , how to display image through class

Asked

Viewed 21 times

1

How do I display an image through my css condigo? is that the theme I use the images as for example: the banners are displayed through the class in style.css , below is what would be done but do not know how to get with this variable in the file style.css , I even put the css code inside the tag in the view to test , but I don’t know how to mix the variable I get with css, I must be missing the syntax. You can guide me if possible vfr , I am new in the Aravel .

.minhaClasseBanner {
  background: url("../../storage/{{$banners->image}}") no-repeat center;
  background-size: cover;
  position: relative;
  z-index: 0;
  display: grid;
  align-items: center;
}

2 answers

0

Blade shortcodes in Laravel do not work on files .css, view files only (.blade.php). In this case, to put variables in CSS, you will have to pass using the tag style object in Blade view.

Styles.css

.minhaClasseBanner {
    /*background: url("../../storage/{{$banners->image}}") no-repeat center;*/
    background-size: cover;
    position: relative;
    z-index: 0;
    display: grid;
    align-items: center;
}

suaview.blade.php

<div class="minhaCLasseBanner" style="background: url("../../storage/{{$banners->image}}") no-repeat center">
    ...
</div>
  • Truth as you said it worked , however my variable with the path is with the backslash thus , I need to use so / , OBS: I registered the image using Voyager , I do not know if it has anything to do, I need to find a way to save to the bank with the bar like / or I have to find a way to invert the bar before using? as I am new in washable I have no idea how to do that .

  • @Webssystematizing ask a new question with the link to this, telling the new problem and what was the previous problem. Also, mark my answer as correct if it helped you

0

.minhaClasseBanner {
    /*background: url{{asset("../../storage/{{$banners->image}}")}} no-repeat center;*/
    background-size: cover;
    position: relative;
    z-index: 0;
    display: grid;
    align-items: center;
}

Browser other questions tagged

You are not signed in. Login or sign up in order to post.