Hello, I’m using stackblitz and I’m not sure how to make the image show up. I uploaded the image file through github and it shows up in the studio, but when I use the href src=“” command the image does not pop up. How do I fix this? I can’t find a single tutorial that helps me solve this issue.
I think we need more information. Where is the image being hosted? Can you provide a URL to the image? Can you paste in the relevant HTML? Are you getting any error messages (check the browser dev tools console to see if there are any messages concerning the image)?
To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.
I don’t understand anything. I tried uploading the image and I don’t know how. It just says download (3).jpeg. I had the picture in the studio, but it isn’t there anymore and doesn’t work. Last time it had a very long name instead of what I see in the videos like moon.jpeg. My project doesn’t show in github either. Do you have a tutorial or something? Github is so confusing it is scary not gonna lie, way too complicated.
StackBlitz lets you upload images. So you can just add it to the project directly.
If you need help with your code we really need to see it. So add a link to your StackBlitz and GitHub repo.
Where can I upload images to stackblitz directly? I don’t see an option for that. I don’t really need help with my code, I just need to find a way to upload an image and have a folder for it like I see in videos, also thanks.
You can drag and drop the files into the file explorer on the left.
Where is the file explorer? I drag the image into the files section and nothing happens.
it should upload it. are you on chrome?
Yes, I am on chrome. Stackblitz is browser based, not an application.
it’s browser baased application - that lets you upload images.
? What is the solution to my issue? How can I upload an image? Without being able to it makes it difficult to follow tutorials and make any sort of website.
well, if you can’t upload properly on stackblitz, then open account on Cloudinary - sign up for free. That will be the end of your problems with images, for sure.
You can link from there any image you upload, and you can upload thousands of them.
No, the website is very confusing and I don’t know what I’m doing. Cloudinary gives me the code for Ruby, Node.JS, python, etc. I’m only using html and css not any of that advanced stuff. How do I drag and drop an image, maybe I’m not even doing it right. What I was doing was holding onto an image from google and placing it around the files section, the mouse cursor was green with a plus. When I let go of it nothing happened, the image and green symbol disappeared.
It has to be a file on your local system. If you do not have it on your system you need to download it first.
I got to this, is this correct? What am I supposed to type in html to get the image to show up and do I change the file name or leave it as download (3) (1).jpeg? Also thank you and sorry for asking so many questions, very new to this.
I don’t know what StackBlitz is doing. But it doesn’t seem like they support normal static assets. I haven’t actually used their static templates so I just assumed it would work.
https://github.com/stackblitz/core/issues/72
I know for a fact you can use it with their Vite projects and using imports because they have images in the starter template.
Anyway, it works on CodeSandbox with their normal static template. They are both good sites so give CodeSandbox a try.
I want to, but codesandbox is blocked on my chromebook. It says “This website has been blocked by your school administrator”. That is why I chose Stackblitz, it is my only option. Are the Vite projects the same as static, what is the difference? I want to have a solution for this, I don’t wanna keep bugging people.
No, it doesn’t work the same as a static site. You have to import the images and add them using JS.
Edit: It works if the images are in the public folder.
What about Replit does it work for you? They also have normal static templates and allow image uploads.
Otherwise, I would suggest you use an image host instead if you need to use Stackblitz with its static templates. You can use GitHub for image hosting as well.
Do you have a tutorial on image hosting? I don’t know how to use github and have no idea what image hosting is. Public folder what does that mean??? How do I do that.
The template I linked to it has a public folder you can use for images.
Here is an example, you can fork it if needed (I will likely delete it at some point).