S
SolidJS•10mo ago
Mr Void

Anchor with target="_blank" leading to app's URL

I have a link with the href set to an external link for an image. When clicking on this link, a new tab should load the image with given URL. However, instead of loading the image's url, it loads the apps url.. what might be the issue?
<a class="btn btn-sm" href={store.imageModal.url} target="_blank">View in new tab</a>
<a class="btn btn-sm" href={store.imageModal.url} target="_blank">View in new tab</a>
Hovering the link shows the correct URL at the bottom left corner of the browser, as shown in the screenshot attached in this post. 🤔
No description
12 Replies
REEEEE
REEEEE•10mo ago
solid-start intercepts all anchor elements afaik and that's what is causing the issue You can try this solution https://discord.com/channels/722131463138705510/910635844119982080/1205466350529814539 Using rel="external"
Mr Void
Mr VoidOP•10mo ago
I attempted to use rel however that failed to work 🤔 then I thought I might need to update the package to latest version.. and to my surprise, it broke 👀 😄 Any idea how I could return a component instead of an element from allowAuthenticated denyAuthenticated functions?
No description
Mr Void
Mr VoidOP•10mo ago
I attempted to return Navigate({ href: "..." }) but that doesn't seem to return anything :/
REEEEE
REEEEE•10mo ago
does the jsx way not work like you have in denyAuthenticated? I think you can do return () => <Navigate/>
Mr Void
Mr VoidOP•10mo ago
You were right :prayge: thank you Reee, that works :PepeHands: this still fails The following doesn't work:
<a class="btn btn-sm" href={store.imageModal.url} target="_blank" rel="external">View in new tab</a>
<a class="btn btn-sm" href={store.imageModal.url} target="_blank" rel="external">View in new tab</a>
But this works:
<a class="btn btn-sm" href={"https://www.google.com/"} target="_blank" rel="external">View in new tab</a>
<a class="btn btn-sm" href={"https://www.google.com/"} target="_blank" rel="external">View in new tab</a>
So I thought the URL might be wrong and console log'ed store.imageModal.url, and it was the correct URL
http://127.0.0.1:54321/storage/v1/object/sign/images/54aa1e3e-eb47-4c98-b409-2de58a0663dc/caf1aacc-8d5c-4ede-ad69-ff17543dabe3
http://127.0.0.1:54321/storage/v1/object/sign/images/54aa1e3e-eb47-4c98-b409-2de58a0663dc/caf1aacc-8d5c-4ede-ad69-ff17543dabe3
Mr Void
Mr VoidOP•10mo ago
this gives "() => store.imageModal.url" as a string in the url
No description
Mr Void
Mr VoidOP•10mo ago
no, i wrote this:
<a class="btn btn-sm" href={() => store.imageModal.url} target="_blank" rel="external">View in new tab</a>
<a class="btn btn-sm" href={() => store.imageModal.url} target="_blank" rel="external">View in new tab</a>
and typescript error saying that's not compatible : Type '() => string' is not assignable to type 'string'.ts(2322) .tsx file ✅
Mr Void
Mr VoidOP•10mo ago
it is indeed set
No description
Mr Void
Mr VoidOP•10mo ago
and removing the arrow function:
No description
Mr Void
Mr VoidOP•10mo ago
right before the anchor, there is an img tag with the same url, and that works as expected- image loads
Mr Void
Mr VoidOP•10mo ago
No description
Want results from more Discord servers?
Add your server