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

Static asset path does not add the BASE after build with @vitejs/plugin-react #7358

Closed
7 tasks done
l1shu opened this issue Mar 17, 2022 · 1 comment
Closed
7 tasks done

Comments

@l1shu
Copy link

l1shu commented Mar 17, 2022

Describe the bug

I use link this:
image

I have a base config:
image

the svg is in public dir:
image

the way of absolute path i use is work in dev:
image

but after build, the path remains the same without adding the base to the front
image

I think this maybe a bug because it work in plugin-vue

Reproduction

https://stackblitz.com/edit/vitejs-vite-4loxrc?file=src%2FApp.tsx&terminal=dev

System Info

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 465.19 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 16.4.1 - ~/.nvm/versions/node/v16.4.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 7.18.1 - ~/.nvm/versions/node/v16.4.1/bin/npm
  Browsers:
    Chrome: 99.0.4844.51
    Safari: 14.0.3

Used Package Manager

yarn

Logs

No response

Validations

@l1shu l1shu changed the title Static asset path does not add the prefix after build Static asset path does not add the prefix after build with @vitejs/plugin-react Mar 17, 2022
@l1shu l1shu changed the title Static asset path does not add the prefix after build with @vitejs/plugin-react Static asset path does not add the BASE after build with @vitejs/plugin-react Mar 17, 2022
@bluwy
Copy link
Member

bluwy commented Mar 21, 2022

That's because Vue's compiler has built-in support to transform src in img to import myImgUrl from "/favicon.svg". React doesn't so you have to import the asset manually like:

import faviconUrl from "/favicon.svg"

function App() {
  const [count, setCount] = useState(0);
  return (
      <img src={faviconUrl} className="App-Logo" alt="Logo">
  )
}

@bluwy bluwy closed this as completed Mar 21, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Apr 5, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants