My chat program needs to have an icon that I made called “User.svg” which is located in “images”. One thing you may notice once you see the program, is that the index.html file is located inside of a folder called “public”. I try to reference my User.svg image from the img tag in my index.html code but that image does not show.
Second, why is my user.svg icon not showing up to the left of each new message?
https://replit.com/@OSoft/OChat-ALPHA-No-Sign-In?v=1#public/index.html
You’ll need to make the images folder static as well, which means adding:
app.use(express.static(path.join(__dirname, 'images')));
Then in the html file, make the src User.svg and it should work.
I’m afraid I shall need more clarification than that.
In your server.js, add the following code on line 12:
app.use(express.static(path.join(__dirname, 'images')));
Then on line 175 in index.html, change the img src to User.svg instead of ./images/User.svg
alternatively, you could try moving the whole “images” folder into “public” (That’d work right?)
That works too yes, but you’d still have to change the image src.
If you want to keep the image folder in the same place, use my solution.
I moved the folder. But what about having the icon show to the left beside every new message
hmm, embed an html element at the beginning of each message that contains the user profile picture?
If you can understand, can you please be more specific?
Porbably just add <img src="./images/User.svg" alt="User Avatar"> to the beginning of each message (sorry for needing to edit, I don’t touch html that often)
I know that, but I need to know where in my code I should put that, in order to get the desired functionality.
Next to wherever you’re adding the messages to the page. (I’ll look)
Seems like you would need to add it to the code chunks by 266 and 279.
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.