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

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/

• 代码沙箱演示
• 什么是网址？ 文档