Question

我正在尝试通过api调用显示图像。我得到了：

未捕获的错误：找不到模块'“ https://i.ebayimg.com/thumbs/images/g/gw8AAOSwgsxagkvP/s-l225.jpg”'

没有要求，我没有收到警告，但是没有任何显示。

控制台记录下面的pic变量显示： “ https://i.ebayimg.com/thumbs/images/g/gw8AAOSwgsxagkvP/s-l225.jpg”

我已经读到我需要导入图片，但是不知道该如何执行。

class SingleItem extends Component {
constructor(props){
    super(props);
}
render(){
    const { image: imageUrl  } = this.props.value;
    let img = Object.values(imageUrl).toString()
    let pic = `"${img}"`
    var image = require(pic)
    return (
        <div>
            <div src={image}></div>
        </div>
    )
   }
 }

export default SingleItem;

Answer 1

您为什么需要图像。

只需将图片网址用作src属性

render(){
    const { image: imageUrl  } = this.props.value;
    let img = Object.values(imageUrl).toString()
    return (
        <div>
            <img src={img}></img>
        </div>
    )
   }
 }

Answer 2

您不需要require图像。只需将imageUrl设置为src属性即可。

您还需要将div标记修改为img标记。

以下内容应该很好用：

class SingleItem extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const { image: imageUrl } = this.props.value;
        let img = Object.values(imageUrl).toString()

        return ( 
            <div>
                <img src = {img}/> 
            </div>
        )
    }
}

export default SingleItem;

反应：显示来自api调用的图像

2 个答案: