私が vps の django で動かしているデータベースには画像保存機能がついています。
これはとても便利で、例えばちょっとしたこと — 何でもいいのですが、例えば故障した家電の品番・製造番号や領収書などをスマホで撮影して、画像をちょっと圧縮してコメントを添えてデータベースにアップロードすることができます。
アップロードした後で、その画像を見ながら必要な情報をテキスト化しておけば、その中の一部でもキーワード検索することができます。
このアプリは世界中どこからでもアクセスできるので、スマホさえあれば記録も閲覧も可能です。
storageフォルダへのシンボリックリンク
laravel では、画像は public フォルダから見える場所に保存しておく必要があるようです。
しかし、画像を実際に保存するのは「storage/app/public」です。
そこで、public に storage に対するシンボリックリンクを作成します。
php artisan storage:link
public に作成されたシンボリックリンクを開いてその中に画像をフォルダを入れます。
もちろん「storage/app/public」も入れても同じです。
django の画像保存方法
django の場合は、画像は media に保存されていました。
その構造は以下のようになっています。
media
└── uploads
├── 2021
│ ├── 08
│ │ └── 31
│ │ ├── IMG_1598.png
│ │ ├── IMG_3301.png
│ │ ├── IMG_3301_45CxdhG.png
│ │ ├── IMG_3301_9lYn2Wz.png
│ │ ├── aaa.png
│ │ └── ddd.png
│ ├── 09
│ │ ├── 06
│ │ │ ├── 5D2FACDA-6F17-4365-87A5-904BB3459961.jpeg
│ │ │ ├── 612B8B34-8945-4000-8DF2-C8C1F7B2D26E.jpeg
│ │ │ ├── 887F18E7-AAFC-4550-BCD0-F405DB427FEB.jpeg
│ │ │ ├── A2077E5D-C2CA-4A69-9417-C151A3D0EB39.jpeg
│ │ │ └── IMG_1711.png
この uploads 以下をコピーして storage/app/public にペーストしました。
データベースには画像のパス情報として「uploads/2022/11/03/amazonprime.jpg」というレコードがあります。
このパス情報を元にして、laravel でも画像をモーダルウィンドウで閲覧します。
jquery の読み込みとスクリプト
jquery の読み込みは面倒な方法がネット上にありますが、そんなことに時間をかけるつもりはないので一番簡単な方法を取ります。
views/layouts/base.blade.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="{{ asset('/css/mymemo.css') }}" >
<link rel="stylesheet" href="{{ asset('/css/modaal.min.css') }}" >
<script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
<script src="{{ asset('js/modaal.min.js') }}"></script>
<script type="text/javascript">
$(function(){
$('.gallery').modaal({
type: 'image'
});
});
</script>
</head>
<body>
<main>
@yield('content')
</main>
</body>
</html>
@extends('layouts.base')
@section('content')
<table class="datashow">
<tr><th>id</th><th>日付</th><th>カテゴリ</th><th>コメント</th><th>画像</th></tr>
@foreach ($alldata as $ev )
<tr>
<td>{{ $ev['id'] }}</td>
<td>{{ $ev['hizuke'] }}</td>
<td>{{ $ev['category'] }}</td>
<td>{!! nl2br(e($ev['comment'])) !!}</td>
@if ($ev['picture'])
<td><a href="{{'storage/'.$ev['picture']}}" class="gallery"><img src="{{asset('storage/'.$ev['picture'])}}" width=30></a></td>
@else
<td></td>
@endif
</tr>
@endforeach
</table>
@endsection
これで思い通りに動くのですが、「img src=”{{asset(‘storage/’.$ev[‘picture’])}}”」というのは django の画像システムに合わせてあるので、いずれ laravel に合わせて書き換える必要があると思います。
