Question

我正在使用creat-react-app（CRA）并且只想通过CSS包含放置在公共文件夹中的png文件（我保留所有图像文件）。现在我试图通过CSS引用此图像（我只将background-image行添加到新生成的CRA应用程序中）：

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
  background-image: url("../public/example.png");
}

You attempted to import example.png which falls outside of the project src/ directory

如何在CSS文件中引用图像文件而不复制/src内的某个地方？我也不想弹出应用程序并删除错误消息。

编辑：此问题与The create-react-app imports restriction outside of src directory不同，因为它没有说明如何在CSS级别解决此问题。建议的解决方案是在JavaScript文件中添加我不想做的样式。

Answer 1

答案是错误的。只需在名称前使用/即可，这将使其相对于构建输出根目录，该根目录包含公用文件夹中的所有内容。

对于上述问题：

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
  background-image: url("/example.png");
}

关键部分是

/example.png

是指位于公共文件夹中的文件example.png

Answer 2

就我而言，要从css / scss访问图像，必须将图像目录以及字体移动到src目录。之后，我可以直接在css / scss文件中引用它们，

m = {'one': '$1'}
m_inv = {v: k for k, v in m.items()}

@dataclass
class Foo:
    one: str

    @classmethod
    def from_dollar_vars(cls, **kwargs):
        return cls(**{m_inv[k]: v for k, v in kv_pairs})

def factory(kv_pairs):
    return {m[k]: v for k, v in kv_pairs}

x = {'$1': 'foo'}
f = Foo.from_dollar_vars(**x)
assert dataclasses.asdict(f, dict_factory=factory) == x

参考：

https://github.com/facebook/create-react-app/issues/829

https://create-react-app.dev/docs/using-the-public-folder/

Answer 3

使用"./image.png"。

背后的逻辑是，当应用完成、构建和部署时，您将放置代码的 css 文件将成为 index.html 的一部分。

Answer 4

删除相对路径中的额外..。：）

来自create-react-app中CSS的公用文件夹中的引用文件

4 个答案: