S
SolidJS•4mo 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•4mo 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 Void•4mo 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 Void•4mo ago
I attempted to return Navigate({ href: "..." }) but that doesn't seem to return anything :/
REEEEE
REEEEE•4mo ago
does the jsx way not work like you have in denyAuthenticated? I think you can do return () => <Navigate/>
Mr Void
Mr Void•4mo 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 Void•4mo ago
this gives "() => store.imageModal.url" as a string in the url
No description
Mr Void
Mr Void•4mo 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 Void•4mo ago
it is indeed set
No description
Mr Void
Mr Void•4mo ago
and removing the arrow function:
No description
Mr Void
Mr Void•4mo ago
right before the anchor, there is an img tag with the same url, and that works as expected- image loads
Mr Void
Mr Void•4mo ago
No description
Want results from more Discord servers?
Add your server
More Posts
Solid-start site shows blank page when deployed with github-pagesThis is the deploy.yml I used https://nitro.unjs.io/deploy/providers/github-pages repo https://githIs there a way to get Server Reference inside SolidStart? or other way to use webSocketsI just want to know if there is way to get to server reference that would be usable inside Socket.ioPassing data from `event.locals` to FrontendHey folks, I'm super new to solid/solid start, but I'm trying to implement some authentication and IHow does the "You might not need an effect" page from react.dev translate to SolidJS's effects?I feel like they are both the same construct, but since Solid has a fundamentally different way of rDoes solid-element support defining methods on web components?I'm not currently using `solid-element` to define my web component, because I need to define methodsI'd like to see an example of working with a microservices API architectureI think this is the example that is missing from SolidstartSolidStart or Vite + solid-pwa plugin for creating a fast and secure PWA app?I want to create a PWA app using Solid. I am not decided on if I want to use CSR or SSR but I'm leanis Index of Store that is array Signal?I created an array containing several objects based on createStore. When I iterate through this arracaptureStoreUpdates vs reconcileHi! I'm trying to get a stream of immutable object values from a store. The store is frequently updErrors loading Bootstrap SASS in dev-modeI'm migrating a small app from Solid Start 0.3 to 0.5, so I started with a new app and am bringing t