2009-04-04 4 views
13

私は平均的な電子商取引アプリを持っています。私はITEM_IMAGE_NAMEをデータベースに格納していますが、マネージャーはイメージ名を誤って入力することもあります。指定されたイメージファイルが見つからない場合、デフォルトイメージを表示する最も良い方法はありますか?

製品の一覧を表示するたびに、製品に関連するイメージをサーバーでチェックし、そのファイルが存在しない場合は交換します(IEの赤いX)。デフォルト画像を使用します。

パフォーマンスには影響しませんが、に「画像がありません」という問題を修正する方法があるのだろうかと疑問に思っていました。

私はASP.NET + C#の(.NET 3.5)を使用してい

いくつかのコード:またはプログラム:

​​
+0

入力が矛盾しているという警告をユーザーに表示しない方がいいですか?これは何らかの理由で実際的ではありませんか? – dmckee

+0

私はバッチインポートを許可します。 csv + zip(画像付き)そのプロセス中に妥当性をチェックするのは面倒です –

+0

ああ。それはとにかく良いアイデアでした。私はあなたが別のツールをオフにすることができたと思いますが、あなたはまだあなたの問題を解決しなければならないでしょう... – dmckee

答えて

40

あなたはjavascriptの

<img src="image.jpg" onerror="this.onerror=null;this.src='default.jpg'"> 

編集で何かを検討するかもしれません存在しないイメージが要求された場合、404.aspxはデフォルトイメージを返します。

+0

素敵な素敵な... "onerror"プロパティのことは聞いたことがありません –

+0

それはw3c標準ではありません - 。私は思う... – Erik

+2

ユーザーがJavaScriptを有効にしていない場合はどうなりますか? – kevindaub

1

存在しないイメージファイルへのすべての要求に対して返されるイメージを、サーバー上で指定できます。そうすれば、ユーザーは赤いxの代わりに "2 AWESUM 2 SHO" lolcatを得ることができます。

+0

問題は画像が動的でなければならないということです –

0

あなたのやり方はかなり大丈夫だと思います。私はそれを関数内で行うか、.categoryImageアクセサで行います。

0

ユーザーが一貫性のないデータを入力するのではなく、データを一貫性のあるものにする方法があると思います。マネージメントアプリケーションでは、マネージャが既存のイメージを選択したり、新しいイメージをアップロードしたりして、このイメージに基づいてイメージの名前を設定してイメージが存在することを確認できます。すべての参照がデータベースから削除された場合にのみ、イメージを削除します。人々がこの種の間違いを犯さないように、データとのやりとりをアプリに制限する。

これを処理するもう1つの方法は、idに基づいて画像検索を行い、画像データを返すハンドラ(またはASP.NET MVCのコントローラ)を用意することです。キャッシングと組み合わせると、これは非常に効率的になり、イメージの置き換えも可能になります。

+0

データの一貫性は良好ですが、バッチインポート(画像付きCSV + ZIP)ではそれほど簡単ではありません –

+0

CSVファイル内の名前が見つかったデータをデータベースに追加する前にZIPで検証に失敗したときに対応するファイルがフィードバックとして見つからない行番号をCSVファイルに指定します。 – tvanfosson

2
<style> 
    .fallback { background-image: url("fallback.png"); } 
</style> 

<img class="fallback" src="missing.png" width="400" height="300"> 

負荷missing.png場合は、フォールバックが指定されなかったかのように、それは、それに割り当てられたスペースをカバーします。

missing.pngが読み込めない場合は、代わりにfallback.pngと入力してください。あなたはまだ少し "壊れたイメージ"のアイコンが表示されますが、私はそれを好む...小さなヒントは "私を修正"と言います。

画像がすべて同じサイズでない場合は、デフォルトで背景タイルが表示されます。あなたが好きではない場合はbackground-repeat: no-repeat;を使用することができます。

0

私はErikのソリューションが好きですが、最初の実行後にイベントを削除することはありません。MVCパーシャルビューでそのコードを使用していると、初めてロードされたときだけ動作するからです。私はいいと思うので:あなたは同じような状況で多くの画像を持っている場合は

<img src="image.jpg" onerror="this.src='default.jpg';" /> 

、グリッドのように、あなたの代わりにこれを行うことができます。もちろん

$("img").on("error", function() { 
    $(this).attr('src', 'default.jpg'); 
}); 

を、あなたがしたいことより具体的なjQueryセレクタを使用してください。

関連する問題