Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Static resources in the public directory cannot be accessed normally in the source code #3374

Closed
itmanyong opened this issue Sep 4, 2024 · 4 comments
Labels
🐞 bug Something isn't working

Comments

@itmanyong
Copy link

Version

System:
    OS: Windows 10 10.0.19045
    CPU: (24) x64 Intel(R) Xeon(R) CPU E5-2676 v3 @ 2.40GHz
    Memory: 42.60 GB / 63.91 GB
  Browsers:
    Edge: Chromium (128.0.2739.54)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    @rsbuild/core: 1.0.1-rc.3 => 1.0.1-rc.3
    @rsbuild/plugin-assets-retry: 1.0.1-rc.3 => 1.0.1-rc.3
    @rsbuild/plugin-babel: 1.0.1-rc.3 => 1.0.1-rc.3
    @rsbuild/plugin-image-compress: ^1.0.2 => 1.0.2
    @rsbuild/plugin-sass: 1.0.1-rc.3 => 1.0.1-rc.3
    @rsbuild/plugin-vue: 1.0.1-rc.3 => 1.0.1-rc.3
    @rsbuild/plugin-vue-jsx: 1.0.1-rc.3 => 1.0.1-rc.3

Details

在目录/public/assets/fonts/下存放一个font.woff2文件
源代码css中注册该字体文件,css属性src:url(/assets/fonts/font.woff2)无法正常访问
image
image

Reproduce link

Reproduce Steps

@itmanyong itmanyong added the 🐞 bug Something isn't working label Sep 4, 2024
@chenjiahan chenjiahan changed the title [Bug]: public目录下的静态资源在源代码中无法被正常访问 [Bug]: Static resources in the public directory cannot be accessed normally in the source code Sep 4, 2024
@chenjiahan
Copy link
Member

Similar to this issue: facebook/create-react-app#9937

We will try to provide a solution for this

@chenjiahan
Copy link
Member

A common practice is to put the image in the src folder and use a relative path to reference it:

image

@itmanyong
Copy link
Author

A common practice is to put the image in the src folder and use a relative path to reference it:

image

It seems that in this case, static resources in non-source code can only be obtained by way of request, and cannot be handled by internal parsing

@jackchoumine
Copy link

jackchoumine commented Sep 10, 2024

A common practice is to put the image in the src folder and use a relative path to reference it:

image

rsbuild/core@^0.4.6 is work well but ^1.0.1-rc.5 can not work.

I have a picture in:

public/imgs/wms-0-params.png

vue3 component:

<template>
  <div class="main-wrapper flex flex-1 flex-col">
    <p>hello world</p>
    <!-- NOTE  work well -->
    <img src="/imgs/wms-0-params.png" alt="" srcset="" />
  </div>
</template>

<style lang="scss" scoped>
p {
  color: red;
  /* NOTE can not work Error: HookWebpackError: Cannot find module '/imgs/wms-0-params.png' */
  background-image: url('/imgs/wms-0-params.png');
}
</style>

This paractice is bad. And what's more it is a barrier for migration from vite.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants