server.origin is not substituted in image tag

[joallard]

Describe the bug

Working from an alternate host following the docs about Backend Integration, when I set server.origin to another host, the src links for my image tags are not getting substituted.

I'm working from the Backend Integration docs that says the following:

In order to properly serve assets, you have two options:

Make sure the server is configured to proxy static assets requests to the Vite server
Set [server.origin](https://vitejs.dev/config/server-options.html#server-origin) so that generated asset URLs will be resolved using the back-end server URL instead of a relative path

In my local case:

• the script tag at the bottom of the page successfully gets replaced with the server origin. The images tag do not.
• a Vue component is what contains the image tag

I am half convinced I am missing something relatively obvious here, but I can't find what. (I even upgraded from Vue 2 to 3 in the process to make sure) For instance, I'm not sure if there's a better location for my image asset than in /public (I didn't find in the docs or on the web a better directory structure for it), or whether there's a special syntax for the src. If this isn't a supported case, I'd be happy to help improve the docs to clarify that situation.

Other issues consulted

Searching for server.origin in the Issues:

vitejs/vite#7778: Tentatively fixed by writing the docs that are written above
vitejs/vite#5104: Implemented server.origin
vitejs/vite#9849, vitejs/vite#9851: Recent from last August; appears to have been fixed before v4.0.1 used in repro
vitejs/vite#8116, vitejs/vite#8077: May 2022, precedes current v4.0.1

Reproduction

https://stackblitz.com/edit/vitejs-vite-bghbn5

Steps to reproduce

Given server.origin = "http://localhost:52125"

1. Load /

Expected: Tag img#logo contains localhost in src field
Actual: Attribute img#logo[src] starts with / (shows a relative path)

System Info

System:
    OS: macOS 13.0.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 240.92 MB / 16.00 GB
    Shell: 3.3.1 - /usr/local/bin/fish
  Binaries:
    Node: 16.13.2 - ~/.asdf/installs/nodejs/16.13.2/bin/node
    Yarn: 3.2.0 - ~/.asdf/installs/nodejs/16.13.2/.npm/bin/yarn
    npm: 9.1.2 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox Developer Edition: 108.0
    Safari: 16.1
  npmPackages:
    @vitejs/plugin-vue: ^4.0.0 => 4.0.0
    vite: ^4.0.1 => 4.0.1

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sun0day]

server.origin works in the repo you provide.

I assume this case happens in vue sfc component?

[joallard]

@sun0day Thanks for checking it out

I assume this case happens in vue sfc component?

Indeed.

Edit: Ah, sorry! I thought the initial case was already a Vue template being rendered. I updated the repo to use a SFC template.

From what I can see, in the test repo, we have two cases of image:

1. <img src="/path"> (the Vite logo): doesn't get subsituted
2. import imageUrl from "/path"; <img src="{imageUrl}"> (the JS logo): gets substituted with the origin setting correctly.

I wasn't sure, but from the docs on assets, this doesn't look like the behavior expected

If using the Vue plugin, asset references in Vue SFC templates are automatically converted into imports.

Edit 2: However, if I switch the path to a relative path, I think it works. I suppose that's the way it works?

Edit 3: One more note about this: plugin-vue explains in Asset URL Handling how <img src="./path"> is transformed to import imageUrl from "/path"; <img src="{imageUrl}">

[sapphi-red]

related: vitejs/vite#4836

[dharnil]

Hi there, does this issue still persists?