【问题标题】:CSS Url is displaying image as solid colorCSS Url将图像显示为纯色
【发布时间】:2021-05-28 15:22:04
【问题描述】:

我尝试在 CSS 中通过url() 导入.png 文件,但按钮最终成为图像中的纯色,而不是图像本身。我尝试了不同的图像,它只是加载了不同的纯色。

导航栏应该是纯色的,角落里有按钮,但它会受到周围元素的模糊影响。我试着弄乱z-index,但这并没有改变任何东西。我尝试去除模糊,它修复了模糊渐变,但这对我来说不是问题,.png 仍然无法正确加载。

我仍在尝试使用 CSS,这很可能是因为在不了解 CSS 核心的情况下混合了不同的教程,但我想了解它们为什么会发生冲突。

Link to my CodeSandbox Example

【问题讨论】:

    标签: javascript html css reactjs


    【解决方案1】:

    问题是您的图片网址返回的是 HTML 而不是图片。试试去https://tumuy.csb.app/assets/icons/x.png

    见:Is it possible to serve Static files with create-react-app from public folder?

    【讨论】:

    • 所以,当我研究 create-react-app 文档时,我意识到我的原始代码是用 JS、HTML 和 CSS 编写的。对于我的实际项目,我没有使用 React。我将我的项目转换为 CodeSandbox,只是因为我有一个帐户。我无法在常规 HTML 中从“../assets/icons/x.png”导入 xSymbol。这是我创建问题时的错。
    【解决方案2】:

    你能上传你的代码吗?您是否尝试添加离线和在线图片?

    【讨论】:

    • 我通过 CodeSandbox 的链接分享了
    【解决方案3】:

    在代码示例中,问题是“css class”的名称,您必须使用“class”而不是“className”。

    你能先解决这个问题吗?

    Warning: Invalid DOM property `class`. Did you mean `className`?
    div
    div
    Navbar 
        in div (created by Navbar)
        in Navbar
    

    【讨论】:

    • 我将类修复为类名,但问题仍然存在
    【解决方案4】:

    见:https://codesandbox.io/s/glass-form-forked-hcb20

    Codesandbox 未使用相对 URL 提供图像。我已将其转换为 blob 并使用它。只是一个 hack,但现在可以使用。

    【讨论】:

    • 与文件路径相比,此方法有效的任何原因?
    【解决方案5】:

    不要在样式中使用 class 在 className 中替换它,因为它直接链接到 reactjs 以在 reactjs 中进行样式设置。 class 选择 css 而在 react 你给 className 用于响应样式。您还可以使用它的 Id 来设置元素的样式

    【讨论】:

    • 是的,我解决了这个问题,但问题仍然存在
    • 好吧。也许这篇文章对你有帮助stackoverflow.com/questions/30968113/…
    • 我很感激为我寻找资源所做的努力,但问题的核心不是类名。现在我已经阅读了其他人的尝试,我开始意识到这也不是基于 React 的问题。
    • 好的,如果您发现错误的核心,请分享,也许我可以解决它,否则它会增加我的知识。谢谢
    • 我不知道你是否看到,但解决方法是将background-size 更改为100%
    【解决方案6】:

    在尝试了这么多事情之后,我随机尝试调整我的background-size: 100% 并得到了我想要的结果。

    【讨论】:

      猜你喜欢
      • 2012-06-13
      • 2020-05-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-10-30
      • 2016-05-25
      • 1970-01-01
      • 2014-04-21
      相关资源
      最近更新 更多