Fetch Firestore image url and show in image tag-CodePudding

I can fetch Firestore data (text) and show on may site but I cannot show images. I thought using an id would work but didn't. I though I would just need to replace the src inside the image tag with the Firestore data url

script code

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app);

// all home Data
const hero = onSnapshot(doc(db, "pages", "homePage"), (doc) => {
    //hero image
    var HeroText = doc.data().heroText;
    var HeroLink = doc.data().heroLink;
    var TabOneImage = doc.data().tabOneImage;
    var TabOne = doc.data().tabOne;
    var TabTwo = doc.data().tabTwo;
    var TabThree = doc.data().tabThree;

    document.getElementById("heroText").innerText = HeroText;
    document.getElementById("heroLink").innerText = HeroLink;
    document.getElementById("tabOneImage").innerText = TabOneImage;
    document.getElementById("tabOneName").innerText = TabOne;
    document.getElementById("tabTwoName").innerText = TabTwo;
    document.getElementById("tabThreeName").innerText = TabThree;

   console.log("Current data: ", doc.data());
});

html code

<img class="article-img"
                    src="tabOneImage"
                    alt=" " />

CodePudding user response：

I think your HTML should be:

<img class="article-img"
    id="tabOneImage"
    alt=" " />

And then you can set the src attribute with:

document.getElementById("tabOneImage").src = TabOneImage;