React：显示来自 api 调用的图像答案

【问题标题】：React: Displaying images from api callReact：显示来自 api 调用的图像
【发布时间】：2019-01-22 18:52:05
【问题描述】：

我正在尝试显示从 api 调用获得的图像。我得到：

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

如果没有 require，我不会收到警告，但没有渲染。

控制台记录下面的 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;

【问题讨论】：

你有一个div 而不是img。这可能是问题吗？此外，您不需要绝对网址。
天啊.. 就是这样。谢谢
没问题。很高兴它帮助了你。

标签： reactjs image webpack

【解决方案1】：

您不需要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;

【讨论】：

【解决方案2】：

你为什么需要图片。

src 属性只需使用图片 url

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

【讨论】：