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

server.origin is not substituted in image tag #85

Open
7 tasks done
joallard opened this issue Dec 18, 2022 · 4 comments
Open
7 tasks done

server.origin is not substituted in image tag #85

joallard opened this issue Dec 18, 2022 · 4 comments
Labels
enhancement New feature or request

Comments

@joallard
Copy link

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

@sun0day
Copy link
Member

sun0day commented Dec 29, 2022

image

server.origin works in the repo you provide.

I assume this case happens in vue sfc component?

@joallard
Copy link
Author

joallard commented Jan 10, 2023

@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 sapphi-red transferred this issue from vitejs/vite Jan 12, 2023
@sapphi-red
Copy link
Member

related: vitejs/vite#4836

wmfgerrit pushed a commit to wikimedia/wikidata-query-builder that referenced this issue Jun 6, 2023
Vite is supposed to prefix asset [1] URLs with the base / origin, and
you can see this working for url() in CSS (otherwise the Wikidata logo
would be broken), but due to vitejs/vite-plugin-vue#85 [2] this doesn’t
work for <img> src= attributes. Work around it by importing the
importing the files and then using that URL dynamically. (In the tests,
we need to map those imports to a fake module so Jest doesn’t try to
load the real file content as JS source.)

[1]: https://vitejs.dev/guide/assets.html
[2]: vitejs/vite-plugin-vue#85

Bug: T335754
Change-Id: Ie3c1cf9c225c646b2f7d94727a634e9ff78aad4e
@dharnil
Copy link

dharnil commented Dec 16, 2023

Hi there, does this issue still persists?

@edison1105 edison1105 added enhancement New feature or request and removed pending triage labels Sep 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

5 participants