Question

我见过很多解决方案，但大多数都涉及相对链接。

我的是一个图片网址，我发现它很难加载。

export const Card = (props) => (
    <div className = 'card-container'>
        <img src={`https:\\robohash.org/${props.monster.id}?set=set2&size=180x180`} alt="monster"/>
        <h2 > {props.monster.name}</h2>
        <p>
            {props.monster.email}
        </p>
    </div>

);

这是我在控制台中收到的错误

6:1 GET https://tooluloope.github.io/www.robohash.org/6?set=set2&size=180x180 404

Answer 1

我认为这里发生的是问题代码中的图像源URL的格式不正确，而是使用反斜杠（\\）而不是正斜杠（//）。这破坏了URL（https://）的协议部分，因此该应用程序断定这是一个相对链接，并尝试将其添加到https://tooluloope.github.io/上，从而创建https://tooluloope.github.io/www.robohash.org/。

更改：

https:\\robohash.org/

收件人：

https://robohash.org/

将我的应用程序部署到gh-pages时图像未显示

1 个答案: