Skip to content
This repository was archived by the owner on Feb 6, 2025. It is now read-only.
This repository was archived by the owner on Feb 6, 2025. It is now read-only.

Static assets that are used as a background in css emit a warning #913

@husseincak

Description

@husseincak

Bug report

Expected behavior
Correctly styled rendering on the server side without any warnings when you add a static url from the server assets to the css props (like a background image)

Observed behavior
If you import an image and you add it as a background-image via css or style props, the console shows a warning,

Screenshots
image

Steps involved to reproduce the problem

  1. Create a frontity repository: npx frontity create
  2. Add any image the theme package
  3. Import it on the component index
  4. Add it as a background of any html element

I have created a repository with a hyper-simplified version of frontity where there is only a div with a static image as background: https://github.com/husseincak/testing/

Info about the problem
If you downgrade the package @frontity/core to the v 1.14.3, the warning no longer appears:

  • @frontity/core: ^1.15.1 => 1.14.3
    If i console.log the asset i get two different urls on the client and on the server:
  • Background URL on client: /static/images/image.jpg
  • Background URL on the server: __webpack_public_path__images/image.jpg

Maybe the problem is because the two urls are diferent so the component is being rendered as a different component on the server and on the client

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions