Search code examples
reactjsgoogle-cloud-firestorereactjs.net

google firestore cant reading images -reactjs


i had a problem about reading image datas from firebase/firestore

i do all data (eg. string, image) on 'localhost' but cant reading on 'domain'

here is ss about reading datas on localhost: [localhost]

(https://i.sstatic.net/nFUFh.png)

here is ss about cant reading datas on domain: [domain]

(https://i.sstatic.net/UwU21.jpg)

here is ss about firestore data tree: [firestore data tree]

(https://i.sstatic.net/HYlRP.png)

here is code about push all data to firestore:

export const setDataMenu = async () => { BLOG_ITEMS.forEach(async (item) => { await setDoc(doc(blogRef,${item.id}), { ...item, }) }) }

i think when i pushed all data to firebase, i can read all data after fetch on application. but after than i cant reading.

thanks for your time. happy weekends for everyone.


Solution

  • you should check at static folder. if you cant saw your image files on build/static/media, you should handle draw your image files and change all image names with image file name from firestore.

    for example on your firestore data tree:

    your image path here: image: "/static/media/blog-7.1e2f6c2d7478077d0b95.jpg"

    and your image file name on your computer: blog-7.jpg

    you must edit file name from your computer name blog-7.jpg to blog-7.1e2f6c2d7478077d0b95.jpg and handle draw to build/static/media folder after that try again deploy your project.