Check if image exists on server using JavaScript

Question

Using javascript is there a way to tell if a resource is available on the server  For instance I have images 1 jpg - 5 jpg loaded into the html page  I d like to call a JavaScript function every minute or so that would roughly do the following scratch code     if     imgs 6 jpg  exists      var nImg   document createElement  img6        nImg src       imgs 6 jpg     Thoughts  Thanks

User · Answer

You can refer this link for check if a image file exists with JavaScript.

checkImageExist.js:

    var image = new Image();
    var url_image = './ImageFolder/' + variable + '.jpg';
    image.src = url_image;
    if (image.width == 0) {
       return `<img src='./ImageFolder/defaultImage.jpg'>`;
    } else {
       return `<img src='./ImageFolder/`+variable+`.jpg'`;
    } } ```

User · Answer

You can use the basic way image preloaders work to test if an image exists   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

User · Answer

You could use something like   function imageExists image url        var http   new XMLHttpRequest         http open  HEAD   image url  false       http send         return http status    404       Obviously you could use jQuery similar to perform your HTTP request     get image url       done function                 Do something now you know the image exists          fail function                 Image doesn t exist - do something else

User · Answer

If anyone comes to this page looking to do this in a React-based client  you can do something like the below  which was an answer original provided by Sophia Alpert of the React team here  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            lt img onError  this handleError  src  src    gt

User · Answer

You can just check if the image loads or not by using the built in events that is provided for all images   The onload and onerror events will tell you if the image loaded successfully or if an error occured    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

User · Answer

If you create an image tag and add it to the DOM  either its onload or onerror event should fire  If onerror fires  the image doesn t exist on the server

User · Answer

You may call this JS function to check if file exists on the Server   function doesFileExist urlToFile        var xhr   new XMLHttpRequest        xhr open  HEAD   urlToFile  false       xhr send         if  xhr status     404             console log  File doesn t exist            return false        else           console log  File exists            return true

User · Answer

You can do this with your axios by setting relative path to the corresponding images folder  I have done this for getting a json file  You can try the same method for an image file  you may refer these examples  If you have already set an axios instance with baseurl as a server in different domain  you will have to use the full path of the static file server where you deploy the web application     axios get  http   localhost 3000 assets samplepic png   then  response    gt                console log response             catch  error    gt                console log error               If the image is found the response will be 200 and if not  it will be 404   Also  if the image file is present in assets folder inside src  you can do a require  get the path and do the above call with that path   var SampleImagePath   require    assets samplepic png    axios get SampleImagePath  then

User · Answer

Basicaly a promisified version of  espascarello and  adeneo answers  with a fallback parameter    x000D   x000D  const getImageOrFallback    path  fallback    gt    x000D    return new Promise resolve   gt    x000D      const img   new Image    x000D      img src   path  x000D      img onload        gt  resolve path   x000D      img onerror        gt  resolve fallback   x000D        x000D     x000D   x000D     Usage  x000D   x000D  const link   getImageOrFallback  x000D     https   www fillmurray com 640 360   x000D     https   via placeholder com 150  x000D      then result   gt  console log result     result  x000D   x000D     It can be also implemented using the async   await API  x000D   x000D   x000D    Note  I may personally like the fetch solution more  but it has a drawback     if your server is configured in a specific way  it can return 200   304  even if your file doesn t exist  This  on the other hand  will do the job

User · Answer

A better and modern approach is to use ES6 Fetch API to check if an image exists or not   fetch  https   via placeholder com 150     method   HEAD          then res   gt            if  res ok                console log  Image exists               else               console log  Image does not exist                      catch err   gt  console log  Error    err      Make sure you are either making the same-origin requests or CORS is enabled on the server

User · Answer

This works fine   function checkImage imageSrc        var img   new Image                try           img src   imageSrc          return true        catch err            return false

User · Answer

If you are using React try this custom Image component  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      gt      const imageEl   useRef null     return        lt img       src  src        alt  alt        className  className        onError       gt            imageEl current src   onErrorImage                 ref  imageEl        gt           Image defaultProps       onErrorImage  defaultErrorImage      Image propTypes       src  PropTypes string isRequired    alt  PropTypes string isRequired    className  PropTypes string isRequired    onErrorImage  PropTypes string      export default Image

[javascript] Check if image exists on server using JavaScript?

Examples related to javascript