Различают img & svg, когда они представлены в React в React

Question

Предположим, у меня есть компонент <MyComponent /> that takes in prop called src the src prop can take in svg as well as a img`

 <MyComponent src={someSvgComponent} />

Или

 <MyComponent src={someImgComponent} />

Как проверить, еслипропущенный опора в src это изображение или SVG?Изображение может иметь тип jpeg | jpg | png | gif

Теперь опора src может передавать файл или путь к файлу.

Answer 1

Поскольку и файл src, и строка, закодированная в base 64, содержат формат, вы можете просто проверить следующее в MyComponent или, как если бы вы знали тип изображения, перед тем как передать его в качестве опоры своему MyComponent.

Если вашСтрока base 64 похожа на следующую строку str.include напрямую работает, иначе вы угадываете тип mime из данных base64 ( data: image / type; base64, , который не будет содержать эту часть).

'data:image/png;base64,iVBORw0KGgoAA...5CYII='
'data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjUxMn..'

Остальное

function guessImageMime(data){
  if(data.charAt(0)=='P'){
    return "svg";
  } else if(data.charAt(0)=='/'){
    return "jpeg";
  } else if(data.charAt(0)=='R'){
    return "gif";
  } else if(data.charAt(0)=='i'){
    return "png";
  }
}

if(this.props.src.includes('svg') || guessImageMime(this.props.src) === 'svg') {
    //it is svg
} else {
    //it is image in other format
}

Answer 2

Самое простое решение imo - добавить в MyComponent вторую srcType опору, которая сообщит ему, какой тип изображения передается в качестве опоры.Это предполагает, что вы знаете, какое изображение передается заранее.

<MyComponent src={someSvgComponent} srcType="svg" />

<MyComponent src={someImgComponent} srcType="img" />