自定义laravel HTML元素

Question

是否可以覆盖laravel内置的html元素？例如，考虑HTML：image标签。我想知道我是否可以覆盖它以显示＆＃39; no_available_image.svg＆＃39;当给定的图像路径不存在时。

Answer 1

您无法覆盖<img>标记（或者您不应该），但还有其他方法可以实现图像回退。

另外，考虑到HTML：image标签不是Laravel内置元素，只是HTML和Laravel在这里无关。

Blade PHP解决方案

检查该文件是否存在。如果没有，它将echo后备图像。

@if (file_exists(public_path('path/to/image.jpg')))
    <img src="{{ asset('path/to/image.jpg') }}">
@else
    <img src="{{ asset('images/no_available_image.svg') }}">
@endif

Vue + Blade解决方案

关注this question，您可以创建如下的Vue组件：

ImgFallback.vue

<template>
    <object :data="src" type="image/png">
        <img :src="fallback" />
    </object>
</template>

<script>
    export default {
        props: {
            src: String,
            fallback: String
        }
    }
</script>

然后在app.js

中注册

Vue.component('img-fallback', require('./components/ImgFallback.vue'));

然后在您的刀片模板中，您可以使用：

<img-fallback 
    src="{{ asset('wrong_image_path') }}" 
    fallback="{{ asset('images/no_available_image.svg') }}">
</img-fallback>

重用代码

由于您将在所有情况下使用刀片和相同的后备图像，因此您不希望每次都重复回退属性，因此您可以创建一个名为image.blade.php的刀片模板并放入javascript或PHP选项。然后在你的意见中致电：

@include('image', [ 'path' => 'path/to/your/image.jpg' ])

并使用$path变量填充src文件中的image.blade.php属性。

@if (file_exists(public_path($path)))
    <img src="{{ asset($path) }}">
@else
    <img src="{{ asset('images/no_available_image.svg') }}">
@endif

或

<img-fallback 
    src="{{ asset($src) }}" 
    fallback="{{ asset('images/no_available_image.svg') }}">
</img-fallback>