Djangoのデプロイで画像エラー|【結論】staticのファイルパスを再チェック

こんにちは、つむぎゆりです!

今Djangoでアプリを作っているのですが……。

いつのまにかユーザーがログインした際の、デフォルト画像がNoneになっていることに気づきました。

結論からいうと、

def get_open_eyes_image_url(self):

return self.open_eyes_image.url if self.open_eyes_image else ‘/images/eyes.png’

こういった、デフォルトの画像パスを指定していたところを、

def get_open_eyes_image_url(self):

return self.open_eyes_image.url if self.open_eyes_image else ‘/static/images/eyes.png’

/static/を前につけるだけで解決しました。

これがうまくいかなくて数日間ハマりにハマりまくっていたのですが、解決して本当に嬉しかったですねw

Djangoのデプロイで画像エラー|【結論】staticのファイルパスを再チェック

最もハマった部分

STATICFILES_DIRS = [os.path.join(BASE_DIR, ‘myapp/static’)]

STATIC_URL = ‘/static/’

STATIC_ROOT = BASE_DIR / ‘static’ # 静的ファイルを収集するディレクトリ

とあった場合、フロントエンド側ではstatic部分が省略されてるんですよ。

if ‘reset_defaults’ in request.POST:

# デフォルトの背景色にリセット

character.selected_color = “#ffffff”

default_images = {

‘body_image’: ‘images/body.png’,

‘closed_eyes_image’: ‘images/eyes_close.png’,

‘open_eyes_image’: ‘images/eyes.png’,

‘open_mouth_image’: ‘images/mouth_open.png’,

‘half_open_mouth_image’: ‘images/mouth_half.png’,

‘closed_mouth_image’: ‘images/mouth_close.png’,

‘background_image’: None

}

こういった具合に。もしくはテンプレート側だと以下のとおりです。

{% if character.get_closed_mouth_image_url %}

<img id=”mouth-image-user” src=”{{ character.get_closed_mouth_image_url }}” alt=”Closed Mouth” class=”character-part user-uploaded-image user-mouth”>

{% else %}

<img id=”mouth-image” src=”{% static ‘images/mouth_close.png’ %}” alt=”Closed Mouth” class=”character-part”>

{% endif %}

つまり、クライアント側に渡すファイルパスはstackを抜くが、バックエンド側はstackを足して指示する必要があったんですね。

…なんでDjangoの画像周りはこんな周りくどいことしたの?なーぜなーぜ?

まあとにかくw、無事エラーがなくなって今はスッキリとした、明鏡止水に近い心持ちでございます笑

エラーのURLにNoneがあった場合プレースホルダーなのでNoneを探すと解決

あと、バックエンド周りを作ったのが1ヶ月くらいまえで、最近はVPS周りを作っていたので、まあまあにどれがどのコードだったか忘れていたのも要因でしたw

エラーがでたとき、URLの部分がNoneになっていて、そんなの設定したっけ?と思っていたんですよ。

ところが、これ、GPTがプレースホルダーとしてURLを仮で置いてたんですね。

なので、もしコンソールのURLにNoneがあった場合、かつその場所がわからない場合、とにかくバックエンドで文字列を検索しまくればどこでエラーが出てるかわかりやすいと思います。

▶高校を受験せずお笑い芸人を目指す→ネタ見せ2年→小説を10年間で110作投稿し新人賞受賞→漫画で同人作家7年→現エンジニア&チャットノベル「百合と世界と名探偵」連載中。

つむぎゆりをフォローする

 

スポンサーリンク

タイトルとURLをコピーしました