Question

我正在尝试从API提取显示图片 btw url已定义

fetch(url).then((res) => {
            res.blob()
            .then((img) => {
                console.log(img)
                const  objectURL = URL.createObjectURL(img);
                const url = objectURL.replace(/[blob:]{5}/gi,'')
                ReactDOM.render(<Gallery photos={url} />, document.getElementById('root'));
     });
})

Gallery.js

import React, { Component } from 'react';

class Gallery extends Component {
  constructor (props) {
    super(props);
    this.state = {
      Images: []
    }
  }

  componentDidMount () {
    this.setState({images: this.props.photos});
  }
  render() {
    const {image} = this.props.photos;
    return (
      <div >
          <img 
              className="App"
              width="300"
              height="300"
              src={image} 
              alt="dogs"/>
      </div>
    );
  }
}

export default Gallery;

无论是否带有正则表达式/[blob:]{5}/gi，它仅显示alt属性，而不显示图像。图像已收到并且get调用成功，但是objectURL url不起作用。有帮助吗？

Answer 1

const {image} = this.props.photos;等同于

const image = this.props.photos.image;

这意味着“将image的属性this.props.photos分配给变量image” 。

但是，this.props.photos是字符串。字符串没有image属性。你只是想要

const image = this.props.photos;

您没有对this.state.Images做任何事情，因此可以删除构造函数和componentDidMount。

/[blob:]{5}/gi不会执行您想要的操作。这意味着“匹配由b，l，o或:组成的5个字符的所有序列”

即字符序列bb:ol将匹配。

如果要删除字符串开头的序列blob: ，则应改用/^blob:/i。

但是，您不应从网址中删除blob:。

完整和简化的示例

import React, { Component } from 'react';

function Gallery(props) {
  return (
    <div >
      <img 
        className="App"
        width="300"
        height="300"
        src={props.image} 
        alt="dogs"
      />
    </div>
  );
}

fetch(url)
  .then(res => res.blob())
  .then(img => {
    ReactDOM.render(
      <Gallery image={URL.createObjectURL(img)} />,
      document.getElementById('root'),
    );
  })

显示来自提取API调用节点/反应的图像

1 个答案: