更改 Laravel Jetstream 应用程序中的徽标
Change the Logo in Laravel Jetstream Application
我是 Laravel 的新手,正在尝试使用 Jetstream 和 Inertia 更改 Laravel 应用程序中的徽标。
我已经阅读了 Laracasts 上的文档和资源,并了解我需要更新 svg(或者可以通过使用 html img 标签来使用 png/jpg 等)以下文件:
- 应用-logo.blade.php
- 认证卡-logo.blade.php
- 应用-mark.blade.php
徽标在 AppLayout.vue 中通过 jet-application-mark 元素引用:
<div class="flex-shrink-0 flex items-center">
<inertia-link :href="route('dashboard')">
<jet-application-mark class="block h-9 w-auto" />
</inertia-link>
</div>
以及 Welcome.vue 中的 jet-application-logo 元素:
<div>
<jet-application-logo class="block h-12 w-auto" />
</div>
在上面列出的每个文件中,我将 svg 替换为资源的 html img:
<img src="{{ asset('images/enhanced-logo.png') }}" />
更改上述文件并重建后,原来的 Jetstream 徽标仍然存在 - 它唯一可用的地方是 login.blade.php,以下代码确实提取了我想要的图像:
<x-slot name="logo">
<x-jet-authentication-card-logo />
</x-slot>
任何关于我做错了什么的指导都将不胜感激。
由于我使用的是惯性堆栈,我需要编辑以下文件:
- resources/js/Jetstream/ApplicationLogo.vue
- resources/js/Jetstream/ApplicationMark.vue
与:
<template>
<img src="/images/enhanced-logo.png"/>
</template>
以及文件:
- resources/views/vendor/jetstream/components/authentication-card-logo.blade.php
与:
<img src="{{ asset('images/enhanced-logo.png') }}" />
用我的图片替换现有的 Jetstream 徽标。
要在 Laravel Jetstream 应用程序中更改徽标:
无论堆栈如何,Jetstream 应用程序中的身份验证视图都是简单的 blade 两个堆栈通用的视图。要更改身份验证视图的徽标,请编辑 resources/views/vendor/jetstream/components/authentication-card-logo.blade.php
<a href="/">
//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />
</a>
然后根据堆栈
惯性栈
用您自己的自定义徽标替换
中的默认徽标
- resources/js/Jetstream/ApplicationLogo.vue
- resources/js/Jetstream/ApplicationMark.vue
和
<template>
//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />
</template>
Livewire 堆栈
用您自己的自定义徽标替换
中的默认徽标
- resources/views/vendor/jetstream/components/application-logo.blade.php
- resources/views/vendor/jetstream/components/application-mark.blade.php
和
//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />
我是 Laravel 的新手,正在尝试使用 Jetstream 和 Inertia 更改 Laravel 应用程序中的徽标。
我已经阅读了 Laracasts 上的文档和资源,并了解我需要更新 svg(或者可以通过使用 html img 标签来使用 png/jpg 等)以下文件:
- 应用-logo.blade.php
- 认证卡-logo.blade.php
- 应用-mark.blade.php
徽标在 AppLayout.vue 中通过 jet-application-mark 元素引用:
<div class="flex-shrink-0 flex items-center">
<inertia-link :href="route('dashboard')">
<jet-application-mark class="block h-9 w-auto" />
</inertia-link>
</div>
以及 Welcome.vue 中的 jet-application-logo 元素:
<div>
<jet-application-logo class="block h-12 w-auto" />
</div>
在上面列出的每个文件中,我将 svg 替换为资源的 html img:
<img src="{{ asset('images/enhanced-logo.png') }}" />
更改上述文件并重建后,原来的 Jetstream 徽标仍然存在 - 它唯一可用的地方是 login.blade.php,以下代码确实提取了我想要的图像:
<x-slot name="logo">
<x-jet-authentication-card-logo />
</x-slot>
任何关于我做错了什么的指导都将不胜感激。
由于我使用的是惯性堆栈,我需要编辑以下文件:
- resources/js/Jetstream/ApplicationLogo.vue
- resources/js/Jetstream/ApplicationMark.vue
与:
<template>
<img src="/images/enhanced-logo.png"/>
</template>
以及文件:
- resources/views/vendor/jetstream/components/authentication-card-logo.blade.php
与:
<img src="{{ asset('images/enhanced-logo.png') }}" />
用我的图片替换现有的 Jetstream 徽标。
要在 Laravel Jetstream 应用程序中更改徽标:
无论堆栈如何,Jetstream 应用程序中的身份验证视图都是简单的 blade 两个堆栈通用的视图。要更改身份验证视图的徽标,请编辑 resources/views/vendor/jetstream/components/authentication-card-logo.blade.php
<a href="/">
//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />
</a>
然后根据堆栈
惯性栈
用您自己的自定义徽标替换
中的默认徽标- resources/js/Jetstream/ApplicationLogo.vue
- resources/js/Jetstream/ApplicationMark.vue
和
<template>
//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />
</template>
Livewire 堆栈
用您自己的自定义徽标替换
中的默认徽标- resources/views/vendor/jetstream/components/application-logo.blade.php
- resources/views/vendor/jetstream/components/application-mark.blade.php
和
//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />