CD
Cloudflare Developers•16mo ago
Tom4sko

Not loading files in files

Hello. I have my react-website. I used /dist because I am using react + vite. The problem is that I have files of images inside main image folder. As you can see on pictures. What are steps to build it to work?
No description
9 Replies
Tom4sko
Tom4skoOP•16mo ago
https://github.com/Tom4sko/BuildsMarket-Web tell me if it is private or public
Victor
Victor•16mo ago
Posting again here for visibility. The repo is now public. Project does use the github connect not manual upload I made a fork of your repo (https://github.com/demosjarco/BuildsMarket-Web) and it's live here: https://buildsmarket-web-cf6.pages.dev (This is just for demo purposes, I'll be taking it down later this week)
Victor
Victor•16mo ago
By default the build configurations points to a finished directory of /build but the last few logs 
16:34:54.710    dist/assets/brandingBackground-329d6ed1.png     262.35 kB
16:34:54.710    dist/assets/portfolioBackground-0723e27b.png    872.92 kB
16:34:54.710    dist/assets/homeBackground-9faeacf6.png       1,514.07 kB
16:34:54.710    dist/assets/index-64a9f809.css                  255.70 kB │ gzip:  37.18 kB
16:34:54.711    dist/assets/index-919dd778.js                   297.77 kB │ gzip:  94.91 kB
16:34:54.711    ✓ built in 5.17s
16:34:54.768    Finished
16:34:54.769    Note: No functions dir at /functions found. Skipping.
16:34:54.769    Validating asset output directory
16:34:54.770    Error: Output directory "build" not found.
16:34:55.954    Failed: build output directory not found
16:34:54.710    dist/assets/brandingBackground-329d6ed1.png     262.35 kB
16:34:54.710    dist/assets/portfolioBackground-0723e27b.png    872.92 kB
16:34:54.710    dist/assets/homeBackground-9faeacf6.png       1,514.07 kB
16:34:54.710    dist/assets/index-64a9f809.css                  255.70 kB │ gzip:  37.18 kB
16:34:54.711    dist/assets/index-919dd778.js                   297.77 kB │ gzip:  94.91 kB
16:34:54.711    ✓ built in 5.17s
16:34:54.768    Finished
16:34:54.769    Note: No functions dir at /functions found. Skipping.
16:34:54.769    Validating asset output directory
16:34:54.770    Error: Output directory "build" not found.
16:34:55.954    Failed: build output directory not found
show the content being created in /dist instead
No description
No description
Victor
Victor•16mo ago
Changing the output directory to /dist allows it to build successfully on the next try
No description
Victor
Victor•16mo ago
To change this, go to the pages project > Settings > Builds & deployments > Build configurations > Edit Configurations > Build output directory and set it to dist not build
Tom4sko
Tom4skoOP•16mo ago
but still i cant see the images in team section when you look closely to team page there are empty images. It is caused because they are in a folderer inside main image folder
QuaqSim
QuaqSim•16mo ago
I think this is an error in e.g. src/database/PartnerData.js. The photo properties in there reference ../src/images/ but I think they should be ../images/
Tom4sko
Tom4skoOP•16mo ago
yeah but ../images/ is not working even on my local I tried to put folders inside public folder and still idk how can my imports be bad it is just ignoring folder inside folder even though i checked .gitignore and there is nothing it is live on git, but still cloudflare cant process it somehow
QuaqSim
QuaqSim•16mo ago
I've been looking at Vite documentation (interesting distraction), I think the issue was that the path strings were not being imported. In src/screens/DonateScreen.jsx for example, paypalLogo is being imported and that reference is being used for the src. It seems this triggers the asset management and the src gets adjusted appropriately during build. Without the import, as is the case where those images are missing, the reference to e.g. {BuildersItem.photo} is simply being treated as a string and results in exactly that string being output during the build. If you put images inside public, it looks like you should reference them using an absolute path, treating public as the root. E.g. if you have public/images/BuildersImages/Hyyzounn.png, the string you use in BuildersData.js should be /images/BuildersImages/Hyyzounn.png. The part about using public is here by the way: https://vitejs.dev/guide/assets.html#the-public-directory

Did you find this page helpful?