我想在我的 css 文件中添加帶有 laravel URL 的背景圖像。 我可以通過僅包含路徑來做到這一點？

Question

我想用 laravel URL 添加背景圖像。 我可以通過僅包含 web 路徑本身來做到這一點，但我想使用 Laravel URL。

這是我現在在 css 中的操作方式：

.toggle.active {
  background: url("{{ asset('assets/img/cancel.png')}}");
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: center;
}

但它不起作用

Answer 1

除非您的 CSS 在刀片文件中，否則您不能這樣做。 但是您可以在刀片中創建一個 CSS 變量並在 CSS 中使用它。

<div class="toggle" style="--img-url:{{ asset('assets/img/cancel.png')}}">

.toggle.active {
  background:url(var(--img-url))
}

Answer 2

背景圖像：url（“{{資產（'assets/img/cancel.png'）}}”）

必須檢查您在此“public/assets/img”目錄中的圖像。

然后您也可以通過在 css 中添加一些高度來檢查這一點。

Answer 3

確保您在資產目錄中有圖像，然后嘗試此代碼

<div style="background:url({{asset('assets/img/cancel.png')}})">

您的內容在這里

Answer 4

<div class="product-grid" style="background-image: url(storage/{{$manga->manga_cover}})">

如果它來自您的公共/存儲文件夾，請使用