145

javascript を使用して、リソースがサーバー上で利用可能かどうかを確認する方法はありますか? たとえば、画像 1.jpg - 5.jpg を html ページにロードしています。次のスクラッチ コードを大まかに実行する JavaScript 関数を 1 分ごとに呼び出したいと思います...

if "../imgs/6.jpg" exists:
    var nImg = document.createElement("img6");
    nImg.src = "../imgs/6.jpg";

考え？ありがとう！

4

16 に答える 16

143

イメージ プリローダーが機能する基本的な方法を使用して、イメージが存在するかどうかをテストできます。

function checkImage(imageSrc, good, bad) {
    var img = new Image();
    img.onload = good; 
    img.onerror = bad;
    img.src = imageSrc;
}

checkImage("foo.gif", function(){ alert("good"); }, function(){ alert("bad"); } );

JSFiddle

于 2013-09-16T21:43:14.050 に答える
60

すべての画像に提供されている組み込みイベントを使用して、画像が読み込まれるかどうかを確認できます。

およびイベントはonload、onerrorイメージが正常にロードされたかどうか、またはエラーが発生したかどうかを示します。

var image = new Image();

image.onload = function() {
    // image exists and is loaded
    document.body.appendChild(image);
}
image.onerror = function() {
    // image did not load

    var err = new Image();
    err.src = '/error.png';

    document.body.appendChild(err);
}

image.src = "../imgs/6.jpg";
于 2013-09-16T21:42:50.210 に答える
16

誰かがReactベースのクライアントでこれを行うためにこのページにアクセスした場合は、以下のようなことができます。これは、React チームの Sophia Alpert によって提供された元の回答でした。

getInitialState: function(event) {
    return {image: "http://example.com/primary_image.jpg"};
},
handleError: function(event) {
    this.setState({image: "http://example.com/failover_image.jpg"});
},
render: function() {
    return (
        <img onError={this.handleError} src={src} />;
    );
}
于 2016-07-13T18:25:05.000 に答える
1

時々欠落している可能性のあるJSを介してユーザーの画像を表示するのに苦労していました。

画像の読み込みが失敗したときに特定の画像を表示するには、html で次の操作を行うことができます。

<img src="img/path/image.png" onerror="javascript:this.src='img/path/no-image.png'">

共有したかっただけです...おそらく、これで時間を節約できます!

于 2022-01-03T10:22:23.203 に答える
1

React を使用している場合は、次のカスタム イメージ コンポーネントを試してください。

import React, { useRef } from 'react';
import PropTypes from 'prop-types';

import defaultErrorImage from 'assets/images/default-placeholder-image.png';

const Image = ({ src, alt, className, onErrorImage }) => {
  const imageEl = useRef(null);
  return (
    <img
      src={src}
      alt={alt}
      className={className}
      onError={() => {
        imageEl.current.src = onErrorImage;
      }}
      ref={imageEl}
    />
  );
};

Image.defaultProps = {
  onErrorImage: defaultErrorImage,
};

Image.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired,
  className: PropTypes.string.isRequired,
  onErrorImage: PropTypes.string,
};

export default Image;
于 2020-11-17T03:01:43.340 に答える
0

画像がフォルダにあるかどうかを知りたい場合、これはうまくいきます

function checkImage(var, extension){
  var image = new Image();
  var url_image = './folder/' + var + '.' + extension;
  image.src = url_image;
  if (image.width == 0) {
    return false;
  } else {
    return true;
  }
}
于 2021-09-10T17:39:15.927 に答える