2

我是 Laravel 的新手，正在尝试使用 Jetstream 和 Inertia 更改 Laravel 应用程序中的徽标。

我已经查看了 Laracasts 上的文档和资源，并了解我需要更新以下文件中的 svg（或者可以通过使用 html img 标签来使用 png/jpg 等）：

  • 应用程序-logo.blade.php
  • 身份验证-card-logo.blade.php
  • 应用程序-mark.blade.php

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>

以及 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>

任何关于我做错了什么的方向都将不胜感激。

4

2 回答 2

2

在 Laravel Jetstream 应用程序中更改 logo：

无论堆栈如何，Jetstream 应用程序中的身份验证视图都是两个堆栈通用的简单刀片视图。更改身份验证视图的徽标编辑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>

然后根据堆栈

惯性堆栈

用您自己的自定义徽标替换默认徽标

  • 资源/js/Jetstream/ApplicationLogo.vue
  • 资源/js/Jetstream/ApplicationMark.vue

和

<template>
    //Replace the default svg with your own logo svg or an image
    <img src="custom/logo.png" />
</template>

活线堆栈

用您自己的自定义徽标替换默认徽标

  • 资源/视图/供应商/jetstream/components/application-logo.blade.php
  • 资源/视图/供应商/jetstream/components/application-mark.blade.php

和

//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />
于 2020-12-08T04:21:26.627 回答
0

由于我使用的是惯性堆栈，我需要编辑以下文件：

  • 资源/js/Jetstream/ApplicationLogo.vue
  • 资源/js/Jetstream/ApplicationMark.vue

和：

<template>
      <img src="/images/enhanced-logo.png"/>
</template>

以及文件：

  • 资源/视图/供应商/jetstream/components/authentication-card-logo.blade.php

和：

<img src="{{ asset('images/enhanced-logo.png') }}" />

用我的图像替换现有的 Jetstream 标志。

于 2020-12-08T03:53:00.483 回答