---
title: 公共文件
summary: "介绍 Ray 项目中 public 目录存放共享静态资源的使用方法及与编译文件的区别。"
tags: [Ray public公共文件目录, 静态资源绝对路径引用, 公共文件与编译文件区别]
questions:
  - Ray 项目中 public 目录的作用是什么？放在哪里？
  - 如何在样式文件和脚本文件中引用 public 目录下的资源？
  - public 公共文件和经过构建器打包的文件有什么区别？
  - 引用 public 目录的资源时路径需要包含 public 目录名吗？
  - public 目录下的文件构建后会被放到哪个目录？
---

# 公共文件

公共文件是指在多个页面中共享的图片资源文件，如：`logo.png` `banner.jpg` 等。

此类文件不需要经过构建器打包, 直接放置在 `public/` 目录下即可。

## 目录结构

public 目录与 src 目录同级, 其结构如下:

```
public
└── images
    └── logo.png
src
  └── ...
```

## 使用公共文件

使用公共文件时, 以 `/` 开头的绝对路径引用即可。不需要包含 `public` 目录名。

### 在样式文件中使用

```css
.logo {
    background-image: url('/images/logo.png');
}
```

### 在脚本文件中使用

```tsx
import { Image } from '@ray-js/ray';
import React from 'react';
export default function Page(props) {
  return <Image src={'/images/logo.png'} />;
};
```

## 与编译文件的区别

| public 公共文件                                         | 打包文件                                                                |
| ------------------------------------------------------- |---------------------------------------------------------------------|
| 使用绝对路径表示, 以 `public/` 下的路径, 直接字符串描述 | 以相对路径引用, 如 `../images/logo.png`。 脚本文件中需导入 (`require` `import`) |
| `public/` 目录下的内容直接拷贝到 `dist/tuya` 目录下     | 编译文件会经过构建器打包, 会被压缩文件名加上 hash 值打包到 `dist/tuya/assets` 目录下。         |
| 文件不存在不影响构建                                    | 文件不存在会导致构建报错                                                        |