[英]Change the Logo in Laravel Jetstream Application
I am new to Laravel and am trying to change the logo in a Laravel application with Jetstream and Inertia.我是 Laravel 的新手,我正在尝试使用 Jetstream 和 Inertia 更改 Laravel 应用程序中的徽标。
I have gone over the documentation as well as resources on Laracasts and understand that I need to update the svg (or can use a png/jpg etc by using the html img tag) in the following files:我已经查看了有关 Laracasts 的文档和资源,并了解我需要在以下文件中更新 svg(或者可以通过使用 html img 标签来使用 png/jpg 等):
The Logo is referenced in AppLayout.vue via a jet-application-mark element: Logo 在 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>
As well as a jet-application-logo element in the Welcome.vue:以及 Welcome.vue 中的 jet-application-logo 元素:
<div>
<jet-application-logo class="block h-12 w-auto" />
</div>
In each of the files listed above I replaced the svg with an html img to a resource:在上面列出的每个文件中,我将 svg 替换为 html img 到资源:
<img src="{{ asset('images/enhanced-logo.png') }}" />
After changing the files above and rebuilding, the original Jetstream logo remains - the only place that it is working is in login.blade.php, the following code does pull in the image that I want:更改上述文件并重建后,原始 Jetstream 徽标仍然存在 - 它唯一工作的地方是 login.blade.php,以下代码确实拉入了我想要的图像:
<x-slot name="logo">
<x-jet-authentication-card-logo />
</x-slot>
Any direction as to what I am doing wrong would be appreciated.任何关于我做错了什么的方向都将不胜感激。
To change logo in a Laravel Jetstream application:要更改 Laravel Jetstream 应用程序中的徽标:
The authentication views in a Jetstream application, regardless of the stack are simple blade views common for both stacks.无论堆栈如何,Jetstream 应用程序中的身份验证视图都是两个堆栈通用的简单刀片视图。 To change the logo for authentication views edit
resources/views/vendor/jetstream/components/authentication-card-logo.blade.php
要更改身份验证视图的徽标,请编辑
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>
Then depending upon the stack然后根据堆栈
Inertia stack惯性堆栈
Replace the default logo with your own custom logo in用您自己的自定义徽标替换默认徽标
with和
<template>
//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />
</template>
Livewire stack活线堆栈
Replace the default logo with your own custom logo in用您自己的自定义徽标替换默认徽标
with和
//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />
Due to the fact that I am using the Inertia stack, I needed to edit the following files:由于我使用的是惯性堆栈,我需要编辑以下文件:
With:和:
<template>
<img src="/images/enhanced-logo.png"/>
</template>
As well as the file:以及文件:
With:和:
<img src="{{ asset('images/enhanced-logo.png') }}" />
To replace the existing Jetstream logo with my image.用我的图像替换现有的 Jetstream 标志。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.