search

MatteoGabriele / vue-progressive-image

Vue progressive image loading plugin
https://matteo-gabriele.gitbook.io/vue-progressive-image/
MIT License
721 stars 43 forks source link

Relative URLs in Local Environment Don't Work #93

Closed designcouch closed 2 years ago

designcouch commented 2 years ago

Description

When using relative urls passed to the src and placeholder-src properties like this: placeholder-src="@/assets/images/placeholder.jpg" src="@/assets/images/full-image.jpg" the url I'm passing is read as a simple string and results in a 404 error for the image.

I noted the pull request a few days ago, but that user is utilizing webpack, and I'm using vite. Not entirely sure how to apply his solution in my situation.

Expected behavior

The url should be read correctly when using the @/ syntax

Actual behavior

Using a relative URL in Vue3 results in a 404 error when the code is run.

Environment

Run this command in the project folder and fill in the result:

npm ls vue-progressive-image: vue-progressive-image@4.0.0-beta.10

Then, specify:

  1. Operating system: MacOS Monterey, running in VS Code
  2. Browser and version: Chrome Version 102.0.5005.61 (Official Build) (x86_64)
designcouch commented 2 years ago

I found a workaround for now. Importing the url and then declaring it in data before using it in the component works. Not perfect, but it makes this issue less urgent.

MatteoGabriele commented 2 years ago

Yeah, I do that too; I'm not entirely sure how to achieve that, to be honest. I might try to read something about it. I have the feeling is not something I can do from the plugin but more something that has to be done from each project compiler.

MatteoGabriele commented 2 years ago

Judging by some research I did, and by this Github issue, it looks like a compiler problem, not something I can take care of. Please report to me in case you have a fix or an idea. Thanks