Laravel8 画像の表示について

Question

前提・実現したいこと

在庫詳細画面の/views/stock/show.blade.phpでDBから取得した画像を表示させたい。
（画像がDBとstorage/app/public/imagesに保存されていることは確認済み）

発生している問題・エラーメッセージ

/views/stock/show.blade.phpでasset()を使って画像を表示しようとすると未定義の関数を呼び出しているとエラー発生。

Call to undefined function 　asset() (View: /work/resources/views/stock/show.blade.php)
http://127.0.0.1:8000/list/show/7

/views/stock/show.blade.phpでは、レイアウト/views/layouts/app.blade.phpを読み込んでいるのですが、レイアウトのhead部分で何かjsの設定に不備があるのかなと考え、現在調査しています。

該当コードで怪しい点があればご指摘いただけると幸いです。

該当のソースコード

在庫詳細の機能メソッド

/Controllers/StockController.php

  public function show(Request $request,$id)
  {   
　　　　　   //idから在庫情報を取得
      $stock = Stock::find($id);
      return view('stock.show', ['stock' => $stock]);
   }

在庫詳細のview

/views/stock/show.blade.php
//画像表示部分
<img src="{{　asset('public/images/' . $stock->image) }}" style="width:100%;"/>

↓ //全体のコード

<x-app-layout>
@section('title', '在庫詳細')
    <x-slot name="header">
        <h2 class="text-lg text-gray-800 leading-tight">
            {{ __('在庫詳細') }}
        </h2>
    </x-slot>

    <div class="flex justify-center">
        <div class="mt-12 grid grid-cols-1 gap-6">
            <label class="block">
                <span class="text-gray-700">店名</span>
                <input type="text" name="shop" value="{{$stock['shop']}}" readonly
                class="block rounded-md border-gray-300 shadow-sm focus:border-purple-300 focus:ring focus:ring-purple-200 focus:ring-opacity-30">
                @error('shop')
                <p>❗️<span class="text-red-500">{{$message}}</span</p>
                @enderror
            </label>

            <label class="block">
                <span class="text-gray-700">購入日</span>
                <input type="date" name="purchase_date" value="{{$stock['purchase_date']}}" readonly
                class="block rounded-md border-gray-300 shadow-sm focus:border-purple-400 focus:ring focus:ring-purple-200 focus:ring-opacity-30">
                @error('purchase_date')
                <p>❗️<span class="text-red-500">{{$message}}</span</p>
                @enderror
            </label>

            <label class="block">
                <span class="text-gray-700">期限</span>
                <input type="date" name="deadline" value="{{$stock['deadline']}}" readonly
                class="block rounded-md border-gray-300 shadow-sm focus:border-purple-300 focus:ring focus:ring-purple-200 focus:ring-opacity-30">
                @error('deadline')
                <p>❗️<span class="text-red-500">{{$message}}</span></p>
                @enderror
            </label>

            <label class="block">
                <span class="text-gray-700">商品名</span>
                <input type="text" name="name" value="{{$stock['name']}}" readonly
                class="block rounded-md border-gray-300 shadow-sm focus:border-purple-300 focus:ring focus:ring-purple-200 focus:ring-opacity-30">
                @error('name')
                <p>❗️<span class="text-red-500">{{$message}}</span</p>
                @enderror
            </label>

            <label class="block">
                <span class="text-gray-700">値段</span>
                <input type="text" name="price" value="{{$stock['price']}}" readonly
                class="block rounded-md border-gray-300 shadow-sm focus:border-purple-300 focus:ring focus:ring-purple-200 focus:ring-opacity-30">
                @error('price')
                <p>❗️<span class="text-red-500">{{$message}}</span</p>
                @enderror
            </label>

            <label class="block">
                <span class="text-gray-700">数量</span>
                <input type="number" name="number" value="{{$stock['number']}}" readonly
                class="block rounded-md border-gray-300 shadow-sm focus:border-purple-300 focus:ring focus:ring-purple-200 focus:ring-opacity-30">
                @error('number')
                <p class="-mt-14">❗️<span class="text-red-500">{{$message}}</span</p>
                @enderror
            </label>


                <img src="{{　asset('public/images/' . $stock['image']) }}" style="width:100%;"/>


            <div class="mt-6 mb-12 flex justify-center">
                @can('admin-higher')　{{-- 管理者権限以上に表示される --}}
                    <a href="/admin/list"
                            class="py-2 border-2 text-center border-purple-500 px-4 bg-gradient-to-r from-purple-200 to-pink-200
                                    font-semibold hover:opacity-75 rounded md:w-32">一覧に戻る</a>
                @elsecan('user-higher') {{-- 一般権限以上に表示される --}}
                    <a href="/list"
                        class="py-2 border-2 text-center border-purple-500 px-4 bg-gradient-to-r from-purple-200 to-pink-200
                                font-semibold hover:opacity-75 rounded md:w-32">一覧に戻る</a>
                @endcan
            </div>
        </div>
    </div>

</x-app-layout>

/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>@yield('title')</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">

        @livewireStyles

        <!-- Scripts -->
        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>

試したこと

show.blade.phpでレイアウトを読み込まずに、レイアウトに記述していたコードをshow.blade.phpの方に追加して再度動作確認。
→結果、変わらず同じエラーが発生しました。

補足情報（FW/ツールのバージョンなど）

laravel、livewire、docker

Answer 1

{{　asset('public/images/' . $stock->image) }}
  ↑
このスペース

assetの手前のスペースが全角スペースになってますが、もしかするとこれが原因ではないでしょうか？

Comments

[yuuu752]

ご回答ありがとうございます！
まさにそちらのスペースが原因でした！

[AbeTakashi]

全角スペースを認識できるテキストエディタ、もしくはIDEを導入することをオススメします。こんな些細なことで躓くのはもったいないので！

[yuuu752]

アドバイス頂きありがとうございます！
そのように対応してみます！