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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Relative paths to parent directories don't work #1364

Closed
wwestrop opened this issue May 13, 2018 · 5 comments
Closed

Relative paths to parent directories don't work #1364

wwestrop opened this issue May 13, 2018 · 5 comments
Labels
馃悰 Bug

Comments

@wwestrop
Copy link

馃悰 Relative paths to parent directories don't work

When an HTML file refers to an asset in a parent directory via a relative reference (../image.png), and the --public-url option is set to ./, the bundled version of the HTML tries to find it at image.png, instead of ../image.png. This works fine when the asset lives alongside the HTML, but in the case of HTML in a subfolder it does not.

馃帥 Configuration (.babelrc, package.json, cli command)

N/A

馃 Expected Behavior

  • dist
    • image.bc08a89a.png
    • subfolder
      • page.html

page.html:

<html>
    <body>
        <img src="../image.bc08a89a.png">
    </body>
</html>

馃槸 Current Behavior

  • dist
    • image.bc08a89a.png
    • subfolder
      • page.html

page.html:

<html>
    <body>
        <img src="image.bc08a89a.png">
    </body>
</html>

馃拋 Possible Solution

馃敠 Context

I am writing an Electron app which loads a few images at run time from Javascript (in particular to present as an overlay on the taskbar icon). These images are used elsewhere and are bundled successfully by Parcel.

If the public URL was set as /, the generated references would be absolute rather than relative, and would work when hosted by a webserver.

However, being a desktop app, I cannot just refer to the files by their absolute path, relative to the root, as I might if hosted on a webserver.

(Actually, I think there's a better way of doing what I want, I need to research packing my files into an ASAR etc etc, but I'm reporting this as I think this is still a bug nonetheless)

馃捇 Code Sample

I've created a minimal sample and uploaded to GitHub. npm install, then npm start should have Parcel recreate the dist folder - you'll see the image doesn't work on dist/subfolder/subindex.html

馃實 Your Environment

Software Version(s)
Parcel 1.8.0
Node 8.9.4
npm 5.8.0
Operating System Windows 10
@wwestrop
Copy link
Author

#1303 - may be a dupe - I didn't spot that at first as I though that was CSS-specific

@perillaCC
Copy link

The same error as yours. Projects run well in localhost, but chrome console warns 404 when run in remote server.

@purplecabbage
Copy link

Me too!

@mischnic
Copy link
Member

Fixed by #2518 / duplicate of #1801

@awvalenti
Copy link

Same problem here, on Windows 10. @wwestrop's project at https://github.com/wwestrop/parcel-code-assets reproduces the problem perfectly,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
馃悰 Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@purplecabbage @awvalenti @DeMoorJasper @mischnic @wwestrop @perillaCC