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

最简单的解决方案imo是在df.count()上添加第二个srcType道具，该道具将告诉它正在传递哪种类型的图像作为道具。假设您事先知道要传递什么图像。

MyComponent

Answer 2

由于文件src和以64为基数的字符串都包含格式，因此您可以仅在MyComponent中检查以下内容，否则就好像您知道图像类型一样，然后将其作为道具传递给MyComponent。

如果您的base 64字符串像直接跟随str.includes一样工作，则可以从base64数据（ data：image / type; base64 ，其中不包含此部分）中推测出MIME类型。< / p>

'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
}

在React中作为道具传递时区分img和svg

2 个答案: