Как изменить URL в JavaScript, если он не существует?

Question

Я загружаю набор изображений с расширением .jpg, но некоторые из этих изображений на самом деле являются файлами .png.

Я хочу изменить URL-адрес, используя метод replace, чтобы обновить строку URLиз .jpg в .png, чтобы избежать статуса ошибки 404.

Эти изображения отображают HTML-шаблон, используя только javascript.

Я выполнил следующие шаги:

1

Попытка загрузить изображение с помощью оператора ||.

module.exports = (data) => {
  return `
    <img class='img-circle' src='${data.metadata.image || data.metadata.image.replace('.jpg', '.png'}' />
  `
}

2

Я нашел пакет url-exists.Поэтому я попытался создать функцию, которая проверяет, существует ли URL-адрес, если нет, заменить расширение изображения

const urlExists = require('url-exists')
module.exports = (data) => {
  // function
  function updateUrl (url) {
    urlExists(url, (err, res) => {
      if (res === true) {
        return url
      } else {
        return url.replace('.jpg', '.png')
      }
    })
  }
  return `
    <img class='img-circle' src='${updateUrl(data.metadata.image)} />
  `
}

3

Я нашел этоответ, который определяет, существует ли URL: https://stackoverflow.com/a/10926978/6005062,, поэтому я попытался создать другую функцию для получения ответа с измененным URL-адресом

module.exports = (data) => {
  // function
  function updateUrl (url) {
    let request = new XMLHttpRequest()
    request.open('GET', url, true)
    request.onreadystatechange = function() {
      if (request.readyState === 4) {
        if (request.status === 404) {
          url = url.replace('.jpg', '.png')
        }
      }
    }
    return url
  }
  return `
    <img class='img-circle' src='${updateUrl(data.metadata.image)}' />
  `
}

. Любой из этих методов отображает новый URL-адрес.Как я могу изменить URL в javascript, если он не существует?

Answer 1

для обработки URL с ошибкой вы можете использовать это

 <img class='img-circle' src='${updateUrl(data.metadata.image)}  onerror="this.src='NEW-URL'"/>