assets images are not loading on production
I'm using below url to display the images from web/assets folder into development and these are working
https://apphandle--development.gadget.app/web/assets/coffee-min.png
but if i try below url for production then it is not working
https://apphandle.gadget.app/web/assets/coffee-min.png
so please let me now what url i need to use for production. also is there any method that return dynamic url for development and production
11 Replies
Hello,
Could you please share an example implementation?
ok. open this url into browser and you see the image
https://quizive--development.gadget.app/web/assets/coffee-min.png
but for production, i tried this url but not loading image https://quizive.gadget.app/web/assets/coffee-min.png
while the coffee images is uploaded into assets directory of development and production both
how to display asset images into frontend on production
I was using development path on production but development server stop after some time so images not loading on production
Could you please share the code that uses these images. You've already shared the image files
i'm storing url into db and using them into frontend code like this
import { Page, Text, Layout, AlphaCard, Divider } from "@shopify/polaris";
import { TitleBar, useNavigate } from "@shopify/app-bridge-react";
import { useFindMany } from "@gadgetinc/react";
import Footer from "./Footer";
import { api } from "./api";
const ChooseTemplate = () => {
const navigate = useNavigate();
const [{ data, fetching, error }] = useFindMany(api.quizTemplates); // FETCH TEMPLATES FROM DATABASE
if (!fetching) {
return ( <Page fullWidth divider> <TitleBar title="New Quiz" breadcrumbs={[{ content: "" }]} primaryAction={{ content: "Manage", url: '/quizzes', }} secondaryActions={[ { content: "Dashboard", url: '/', }, ]} /> <Layout> <Layout.Section> <div className="welcome"> <Text variant="headingMd" as="h2">Select a template</Text> <Text>Create your new quiz from a blank template or choose from our template library.</Text> </div> <Divider /> </Layout.Section> <Layout.Section> <div className="row Template-Grid"> {data?.map((item) => <div key={item.id} className="column column-3" onClick={() => { navigate('/quizzes/create/'+item.id); }}> <AlphaCard> <img src={item.image} /> <Text as="h2" variant="bodyMd" alignment="center"> {item.name} </Text> </AlphaCard> </div> )} </div> </Layout.Section> <Footer /> </Layout> </Page> ); } }; export default ChooseTemplate;
return ( <Page fullWidth divider> <TitleBar title="New Quiz" breadcrumbs={[{ content: "" }]} primaryAction={{ content: "Manage", url: '/quizzes', }} secondaryActions={[ { content: "Dashboard", url: '/', }, ]} /> <Layout> <Layout.Section> <div className="welcome"> <Text variant="headingMd" as="h2">Select a template</Text> <Text>Create your new quiz from a blank template or choose from our template library.</Text> </div> <Divider /> </Layout.Section> <Layout.Section> <div className="row Template-Grid"> {data?.map((item) => <div key={item.id} className="column column-3" onClick={() => { navigate('/quizzes/create/'+item.id); }}> <AlphaCard> <img src={item.image} /> <Text as="h2" variant="bodyMd" alignment="center"> {item.name} </Text> </AlphaCard> </div> )} </div> </Layout.Section> <Footer /> </Layout> </Page> ); } }; export default ChooseTemplate;
Have you also looked at our docs on the subject? https://docs.gadget.dev/guides/frontend/building-frontends#static-asset-handling
Are you talking about this btw?
That is completely different than what you explained as the issue.
Please note that file fields don't work that way. You would need to do
image.srcyes i am also tried this
import imgUrl from "./assets/coffee-min.png";
export const Hero = () => {
return <img src={imgUrl} alt="a hero image" />;
};
it display path like
<img src="/assets/coffee-min.png" /> but this is also not working on production. it is only working on development
Works for me