SDWebImageでplaceholderImageを表示した後に画像が追加された場合

Question

アプリのアカウント画像を表示する画面にて、SDWebImageを使用しています。
画像がサーバー上にない場合、placeholderImageを使用して、デフォルト画像を表示しています。
SDWebImageでplaceholderImageを表示した後に画像が追加された場合、追加された画像を反映させるにはどうすればよいのでしょうか。

画像が登録・変更された際、キャッシュを消しているのですが、新しい画像が反映しません。
画像がサーバー上にあり、placeholderImageを使用していない場合には、新しい画像が反映します(他の画面に移動して戻ってきたらですが、、、本当は他の画面に移動しなくても反映してほしい)。

※サーバーにはFirebaseのStorageを利用しています

実際のコード

override func viewDidLoad() {
        super.viewDidLoad()
        
　　　　　accountImageSet(aid: argAid)

}

func accountImageSet(aid: String) {
        let storageRef = storage.reference()
        let reference = storageRef.child("account/resize/(aid)_200x200")
        accountImage.sd_setImage(with: reference, placeholderImage: UIImage(named: "NoImage"))
}

@IBAction func accountImageTap(_ sender: UITapGestureRecognizer) {
        let imagePickerController = UIImagePickerController()
            imagePickerController.sourceType = .photoLibrary
            imagePickerController.delegate = self
            self.present(imagePickerController,animated: true,completion: nil)
}

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        guard let url = info[.imageURL], let imageUrl = url as? URL else { return }
        
        let storageRef = storage.reference()
        let riversRef = storageRef.child("account/(argCid!)")//サーバーでリサイズされて"account/resize/(aid)_200x200"に登録される
        riversRef.putFile(from: imageUrl, metadata: nil)
        
        if let cacheKey = accountImage.sd_imageURL?.absoluteString {
            SDImageCache.shared.removeImageFromMemory(forKey: cacheKey)
            SDImageCache.shared.removeImageFromDisk(forKey: cacheKey)
        }else {
            accountImageSet(aid: argAid!)
        }
        
        //フォトライブラリを閉じる
        picker.dismiss(animated: true) {
        }
}

Answer 1

原因はSDWebImageで一度取得に失敗したreference（URL等）がブラックリストに入ることでした
その結果、新規登録の場合のみ、画像の更新ができなかったようです。
アプリを再起動したら表示できていたので、ブラックリストはアプリを開いている間だけ保存される仕様っぽいですが、そちらは参考サイトを見つけられなかったので、確定ではありません。
下記のように、ブラックリストに保存しないようオプションを設定してあげれば、無事、新規登録の場合でも更新されるようになりました。
オプションを設定する場合、maxImageSizeも指定しないといけないようで、設定数字が妥当なのかわかりませんが、、、

accountImage.sd_setImage(with: reference, maxImageSize: 100000, placeholderImage: UIImage(named: "NoImage"), options: SDWebImageOptions.retryFailed)

Answer 2

FirebaseのStorageを利用したことはありませんが、パッと見た感じで言うと・・・

画像をサーバにアップロードするのにこんなに短時間で終わるはずがないと思います。
アップロードされてからダウンロードしないと表示されないでしょうね。

Comments

[abc1222]

回答ありがとうございます
キャッシュをクリアするタイミングが早いということでしょうか。
画像を変更した際には反映しており、placeholderImageの問題なのかなと思っていたのですが

[errolizer]

他の画面に移動して戻ってきたら、と書いてあったのでそう思いました。
試しにアップロードしてキャッシュをクリアしてから、0.5秒後に ダウンロードしてみてはいかがですか？

[errolizer]

というか、今気づいたのですが、画像をアップロードしたあと、ダウンロードしてないように見えますよ。
accountImageSet(aid: argAid!)呼んでいますか？

[errolizer]

具体的には、
} else {
accountImageSet(aid: argAid!)
}
を下記に変更しないと画像が表示されないはずです。
}
accountImageSet(aid: argAid!)

[abc1222]

申し訳ありません。
質問する上でややこしくなるかなと思って抜いてしまっていたのですが、下記のように見た目上は即反映のようにしています。
}
guard let image: UIImage = info[.originalImage] as? UIImage else { return }
accountImage.image = image

ただ、上記でも、変更の場合は変更後すぐに他のページに移動して戻ってきた際に画像が反映、新規登録の場合、一拍おいてページを移動して戻ってきても反映していない状態です。

[errolizer]

私の方も想像だけで話してしまってます。すいません。
公式を見ると、アップロードの監視方法が書いてありました。
https://firebase.google.com/docs/storage/ios/upload-files?hl=ja
これをコピペして、ログで「アップロード完了！」とか吐かせてみてはいかがでしょうか？

[abc1222]

ありがとうございます！
公式サイトに書いてあったのですね。お恥ずかしい。
サーバー側でリサイズしているのでうまくいくかわかりませんが、キャッシュクリアを少し遅らせたりできそうなので、上記を元に色々試してみます

[errolizer]

やってみました。リサイズしない場合はこれでいけましたよ。
確かにリサイズにも時間かかるのでちょっと工夫が必要そうですね・・・

if let cacheKey = imageView.sd_imageURL?.absoluteString {
SDImageCache.shared.removeImageFromMemory(forKey: cacheKey)
SDImageCache.shared.removeImageFromDisk(forKey: cacheKey)
}
riversRef.putFile(from: imageUrl, metadata: nil) { (_, error) in
if let e = error {
print("error (e.localizedDescription)")
} else {
print("upload success")
self.accountImageSet(aid: xxxx) // アップロード完了/成功したので画像を読みこむ
}
}

accountImageSet(aid: xxxx) // ここではまだアップロードが完了していないのでダメ

[errolizer]

Firebaseのリサイズ機能をざっと見てみましたが、ユーザのプロフィールアイコンのリサイズが目的であれば、ローカルでリサイズしてアップロードする方がいろんな意味で良いと思いました。
そのほうが簡単でシンプルかと・・・余計なことかもしれませんが。

ネットワークリソース、ユーザの通信費用、Firebase利用料金・・・

[abc1222]

確認が遅くなり申し訳ありません。
上記を参考にしながら、リサイズ完了の通知を受け取れたため、とりあえずサーバー側でのリサイズのままで触ってみました。
その中で、やはりSDWebImageの仕様が掴みきれないでいます。

・リサイズ完了を受け取り、キャッシュのクリアと画像の読み込みを行う
→画像の変更の場合は新しい画像が表示されるが、新規登録の場合placeholderImageが表示されるという仕様のまま

一度placeholderImageを表示すると、変更できないのでしょうか

[errolizer]

画像は読み込んでいますか？
上記のコードをみる限り、placeholderを設定している場合は画像を読み込んでいないように見えます。
最新のソースコードを載せていただければ・・・

SDWebImageのplaceHolderは画像を受信するまでに表示する画像のことです。
SDWebImageの最新版を利用し、ドキュメント通りに実装してみてください。

[errolizer]

Firebaseのドキュメントを見てきましたが「リサイズ完了の通知を受け取る方法」は公式には用意されていませんでした。
どのように実装されたのでしょうか？

また、このリサイズ機能は有料サービス（使用しなくても従量課金）ですので、私の方では試せません。

ここまでの話を総合的にみると、単純に存在しない画像を取得しようとしてplaceHolderが表示されているのだと推測します。
iPhoneの写真は12MP程度あります。これをアップロードしてサーバでリサイズするのはかなりの重い作業です（だから有料です）
スマホのボタンを押してすぐに終わるようなものではありません。
技術選定から慎重に検討することをお勧めします。

[abc1222]

コード失礼しました。
変更点としては、画像変更時にキャッシュをクリアし、リサイズが終わった後に画像を設置するようにしています。
ログを確認し、リサイズ後にaccountImageSetが作動していることも確認はしています。
しかし、下記のコードで、画像変更時は更新されるが、新規登録時は更新されないという問題がおきます。
新規登録の場合はplaceHolderがずっと画像を探していて、新たにsd_setImageをしても受け付けてもらえないのでしょうか。

override func viewDidLoad() {
super.viewDidLoad()

　　 accountImageSet(aid: argAid!)

}

func accountImageSet(aid: String) {
let storageRef = storage.reference()
let reference = storageRef.child("account/resize/(aid)_200x200")
accountImage.sd_setImage(with: reference, placeholderImage: UIImage(named: "NoImage"))
}

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {

guard let url = info[.imageURL], let imageUrl = url as? URL else { return }
let storageRef = storage.reference()
let riversRef = storageRef.child("account/(argAid!)")
riversRef.putFile(from: imageUrl, metadata: nil)

if let cacheKey = circleImage.sd_imageURL?.absoluteString {
SDImageCache.shared.removeImageFromMemory(forKey: cacheKey)
SDImageCache.shared.removeImageFromDisk(forKey: cacheKey)
}

//フォトライブラリを閉じる
picker.dismiss(animated: true) {
}
}

@objc func accountChange(_ notification: Notification) {
accountImageSet(aid: argAid!)
}

■補足
最初はキャッシュクリアもリサイズが終わった後に設定したのですが、うまく行かず下記の様になりました。
うまく行かなかった点
・他のページでもアカウント画像を表示しているが、そちらの画像が更新されなかった
・他のページに移動した後にアカウントページに戻ると、アカウントページのアカウント画像は更新されていた

[abc1222]

入れ違いになってしまいました。
リサイズの完了は、サーバーでリサイズした際にデータベース（Firebase）のアカウント情報（更新日）を更新しており、そこが変更された際にリスナーで作動するようにしています。

[errolizer]

circleImageとは何でしょう？

Firebaseの更新時刻が変更になった時に通知が来るとは面白いですね。すべてのユーザに通知されたりしないように制御してるということでしょうか。

[errolizer]

「更新されなかった」「更新されていた」のように画面上の結果だけを追うのではなく、

- リクエストを行った or 行わなかった
- その結果は成功だった or 失敗だった

のように処理の結果を追うようにすれば解決に近づくと思います。
SDWebImageのAPIで結果が補足できます。
例)
imageView.sd_setImage(with: reference, placeholderImage: image) { image, error, type, reference in
　　if let e = error {
　　　　print(e.localizedDescription)
　　} else {
　　　　print("通信成功")
　　}
}

[abc1222]

失礼しました。circleImage→accountImageですね。。。ここに書き写すときにミスしたので、実際のコード側のミスではありません。
Firebaseでは、特定のデータ階層？（Firebaseではコレクション・ドキュメントと呼ぶみたいです）のみに変更のリスナーが設置できるので、該当のアカウントのドキュメントに対してリスナーを設置しています。

記載いただいたエラーの出し方を丁度調べていて、自分のコードでは下記のようなエラーが出ていることがわかりました。
Error Domain=SDWebImageErrorDomain Code=1003 "Image url is blacklisted" UserInfo={NSLocalizedDescription=Image url is blacklisted}

リサイズが終わってもすぐにURLが発行されているわけではないのかもしれません
もう少し調べてみないとエラーの意味が正確にわからないのですが、、、
調べてもサイトに書いてあることがわからず、時間がかかってしまっていますが、おかげさまでちょっとずつ解決に近づいているような気がします

[abc1222]

おかげさまで解決しました！
原因はSDWebImageで一度取得に失敗したreference（URL等）がブラックリストに入ることでした
その結果、新規登録の場合のみ、画像の更新ができなかったようです。
アプリを再起動したら表示できていたので、ブラックリストはアプリを開いている間だけ保存される仕様っぽいですが、そちらはサイトを見つけられなかったので、確定ではありません。
下記のように、ブラックリストに保存しないようオプションを設定してあげれば、無事、新規登録の場合でも更新されるようになりました。
エラーログの見方を教えていただいたおかげです。ありがとうございます！
オプションを設定する場合、maxImageSizeも指定しないといけないようで、設定数字が妥当なのかわかりませんが、、、

accountImage.sd_setImage(with: reference, maxImageSize: 100000, placeholderImage: UIImage(named: "NoImage"), options: SDWebImageOptions.retryFailed)

[abc1222]

色々教えていただいたのでベストアンサーにしたいのですが、上記のコードを回答で入れていただければ選びます。