Question

我试图在CSS的Laravel项目中显示背景图片。但是图像没有显示。我检查了图像路径，它是正确的。我正在使用 Voyager管理面板。我正在从config/filesystems.php

保存图像路径

'public' => [
        'driver' => 'local',
        'root' => public_path('images'),
        'url' => env('APP_URL').'/public/images',
        'visibility' => 'public',
    ],

html

<div class="carousel-item active" style="background-image: url('public/images/{{ $banner[0]->banner_image }}')">

我的图像路径是public\images\image_name。

在控制台中，我发现了以下错误

实际路径为public/images/banners/March2019/image_name

但此处显示public/images/bannersMarch2019image_name。 不加斜杠。

Answer 1

在您的html中尝试以下代码：

<div class="carousel-item active" style="background-image: url('{{asset('images/banners/March2019') }}/{{$banner[0]->banner_image}}');">

使用资产帮助程序功能来达到您的实际路径。希望对您有所帮助。

Answer 2

这不是laravel问题，而是引导问题。看看bootstrap > components > carousel

尝试一下：

<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="{{ url('public/images/' . $banner[0]->banner_image) }}" class="d-block">
    </div>
  </div>
</div>

Answer 3

您不应在url方法中添加public，因为web服务器的根目录是public，因此您的代码应为：

<div class="carousel-item active" style="background-image: url('images/{{ $banner[0]->banner_image }}')">

Answer 4

您可能正在使用Voyager Admin panel的屏幕快照建议/文件夹结构，如果是这种情况，则可以按以下方式使用图像：

public class UniqueValueList<T> extends ArrayList<T> implements Set<T> {

    private String uniqueValueKey;
    private Field keyField;
    HashMap<Object, T> hashMap;

    public UniqueValueList(Class c, String keyName) {
        hashMap = new HashMap<>();
        try {
            keyField = c.getDeclaredField(keyName);
            keyField.setAccessible(true);
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        }
    }

    @Override
    public boolean add(T t) {
        try {
            //get value of the key from provided object.
            Object keyValue = keyField.get(t);
            if (hashMap.containsKey(keyValue)) {
                hashMap.remove(keyValue);
            }
            hashMap.put(keyValue, t);
            super.add(t);
            return true;
        } catch (IllegalAccessException | NullPointerException e) {
            e.printStackTrace();
        }
        return false;
    }

    @Override
    public boolean addAll(Collection<? extends T> c) {
        return super.addAll(c);
    }

    @Override
    public boolean remove(Object o) {
        return super.remove(o);
    }

    @Override
    public void clear() {
        super.clear();
    }

    @Override
    public boolean contains(Object o) {
        return super.contains(o);
    }
}

这应该对您有帮助，我建议请仔细阅读voyager文档。

Answer 5

让我们说这是您在views文件中的div标签其他页面无法访问它，因为它只能提供路径，在图像前添加/ 例如

Laravel中未显示背景图片

5 个答案: