1 
var imgRoot='forum/attachments/users/';

<img 
 src="../employees/attachments/users/username_xyz.png" 
 onerror='this.src=imgRoot+"no_profile_pic.png" '
/>

ユーザー プロファイルの画像 (db に設定されていない) を表示する必要があります。あらかじめ定義されたディレクトリに単純にアップロードし、ユーザー名のスペースをアンダースコアに置き換えます。たとえば、ユーザー名は 'AB C' です。画像 A_B_C.png が必要です。ユーザーの画像がない場合に問題が発生します。上記のように、onerror イベントを追加してデフォルトの画像をロードすることにより、デフォルトの画像を表示する必要があります。

これを処理するより良い方法はありますか? ユーザーがプロフィール写真をアップロードしているかどうかは事前にわかりません。もう 1 つの煩わしさは、フォールバックのデフォルト プロファイル イメージをロードする前にユーザー プロファイル イメージが見つからない場合に、firebug がネットワーク エラーを報告することです。

4

3 に答える 3

1

302ファイルが見つからない場合、サーバーはデフォルトのプロファイル画像の URL への http リダイレクトで応答します。ほとんどの Web サーバーは、構成ファイルだけで、コードなしでこれを行うことができます。

編集： Apacheを使用しているため、次のことを行う必要があります。

  1. mod_rewrite がインストールされていることを確認してください。
  2. .htaccessファイルを使用する場合はAllowOverride On、ターゲット ディレクトリに が設定されていることを確認してください。

  3. httpd.confまたは.htaccessファイルを編集します。

    RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^.*$ /anonymous.jpg [L,R=302]

Apache の設定には多くの癖があるため、設定を少し変更する必要がある場合があります。

于 2013-09-17T08:31:22.887 に答える
1

Javascript を使用して画像をプリロードすることもできます。画像が読み込まれたら、添付します。失敗した場合は、フォールバックを提供するなど、何か他のことを行います。ここに、可能な解決策を示す JS コード スニペットがあります。

/**
 * Tries to load an image and renders a fallback image if it fails.
 * @param {string} srcImage The source of the image to load.
 * @param {string} srcFallback The source of the fallback image.
 */
function loadImageOrFallback(srcImage, srcFallback) {
  var image = new Image(),
      timerFallback = null,
      hasRenderedFallbackImage = false;

  image.onload = function() {
    if (timerFallback !== null) {
      clear(timerFallback);
    }

    if (hasRenderedFallbackImage) {
       // replace the fallback image
    } else {
      // append image to wherever you want
    }
  };

  image.src = srcImage;

  // since there is no way to detect an error when preloading the image,
  // you can use a timeout function (here we are waiting 2 seconds)

  timerFallback = setTimeout(function() {
    var fallbackImage = new Image();
    fallbackImage.src = srcFallback;

    // append fallbackImage to wherever you want

    hasRenderedFallbackImage = true;

  }, 2000);
}

loadImageOrFallback('A_B_C.png', 'fallback.png');

JavaScript を使用してこれを確認するには、試行錯誤のアプローチに従います。タイムアウトにより、遅延も発生します。この状況をサーバー側で検出できれば、はるかに優れたものになります。

フォールバック イメージのレンダリング後にイメージが読み込まれる可能性があることに注意してください。そのため、フォールバック イメージが追加されたことを保存し、onloadコールバックでその値を確認します。

どのように使用するかを示すこの jsFiddleを用意しました。

于 2013-09-17T08:42:37.590 に答える
0

Web アプリケーションでファイルシステムをチェックし、ファイルが存在するかどうかを確認できます。あなたのウェブアプリが何に組み込まれているかわからない.PHPの例: http://www.php.net/manual/en/function.file-exists.php

JSでそれを行うのはハッキーです。常に画像をロードしようとします。

于 2013-09-17T08:26:03.883 に答える