Comments (21)
Totally — we're working on allowing upload of binary files, should land sometime later this month or in Sept :)
from core.
Incidentally, some kinds of binary assets already arrive intact and are served correctly, when you create a StackBlitz from a GitHub repository.
from core.
Will get SVG enabled for vendor assets. Thanks for letting us know about this! 🍻
from core.
btw.. I just tried to upload a *.jpg and I get a message stating that I need to connect to github.. I'm using my github login, I'm signed on.. I don't see anywhere to "connect" ...
from core.
+1
from core.
@kylecordes good eye- we support all static assets for imported github repos right now. We're currently on track to ship static assets by mid-late April; I just posted in #72 (comment) with more info as well.
from core.
It is certainly an easy-ish workaround for anyone with an urgent need for asset serving. Grab your assets, put them in a GitHub repo. Fork that repo and continue all of your local code edits, no problem.
from core.
SVG is not binary, isn't it? But it is not allowed beeing created.
Anyway Material Angular has SVG files in their StackBlitz examples:
https://material.angular.io/components/icon/examples
https://stackblitz.com/angular/epvodnepjxy?file=app%2Ficon-svg-example.ts
but they cannot be loaded:
Console: Error retrieving icon: <svg> tag not found
😢
from core.
+1
from core.
This apparently remains outstanding despite bold and old predictions and stated intentions made in this thread and elsewhere.
You are able to drag and drop binary images (.png
, .jpg
) into a project and they appear in the tree. You are then however unable to save the project. The save fails silently (notwithstanding a cryptic message in the console).
There is no informatation about this limitation in the docs.
There is no messaging to the user when this (or any other) error prevents save from saving the project.
from core.
I have import my project from github [with image] but it does not load images
https://stackblitz.com/github/kumaresan-subramani/stackblitz-test
WHen can we get support to upload .png
and .jpg
files
from core.
I still can't find "assets" folder in angular project. I've issue now as I need to add some static files (mp3 music files as they can't stream from github or some other location) and without which my demo is not going to work. Please look into it.
from core.
Guys, how can I make PWA when Stackblitz isn't supporting static files? Because of that I can't store service worker in my project (it's ignored after being uploaded to Firebase hosting)... Maybe there is a workaround?
from core.
What's the status of this in 2020 ? any word yet ? excited about the prospect of being able to include static assets like images in StackBlitz projects.
from core.
I need to demo a web audio app and I need to fetch audio assets. I cannot do this cross domain due to CORS. I've created a github repo and dropped my assets to my Stackblitz, but it looks like they don't work, maybe served as document type or something like that. Any idea what I can do on my side?
from core.
how how put images? Im a beginner i really dont have the idea.
i did try to drag and drop but it says to have a pro account first. please help me
from core.
Hi @EricSimons, I also have this problem, cannot show the images from the assets folder.
from core.
@philip-sultanescu currently we only support importing images as ESM import strings. Can you link your project here so I can take a look and send back a working example?
from core.
@philip-sultanescu currently we only support importing images as ESM import strings. Can you link your project here so I can take a look and send back a working example?
@EricSimons Here you go, the github icon works when the project is compiled locally:
https://stackblitz.com/edit/github-logo-not-showing?file=src%2Fapp%2Fapp.module.ts
Another bug is that if you download the whole StackBlitz project, then the assets/github_logo.png file is corrupted.
However if you select only the png and click the Download "github_logo.png" button, then it gets shown in a new tab with this AWS presigned url, I expected it to download.
I have solved this problem in my own https://FileMaps.io file manager website - where I use presigned URLs to show images and I also add 2 extra headers to force the download on most browsers (as opposed to opening in a new tab).
This code is written in GO, but you can easily adapt it, as you can see I defined the attachment variable that I set to true whenever I want to download the image. If not then it will display.
// presign returns signed S3 URL with expiration time.
func presign(svc *s3.S3, bucket, key string, expiration time.Duration, attachment bool) (string, error) {
input := s3.GetObjectInput{
Bucket: aws.String(bucket),
Key: aws.String(key),
}
if attachment {
input.ResponseContentDisposition = aws.String("attachment")
input.ResponseContentType = aws.String("application/octet-stream")
}
req, _ := svc.GetObjectRequest(&input)
// TODO: round the current time to the last half-hour and set the expiration to 1 hour,
// so that it can be cached by CloudFront
// https://advancedweb.hu/2018/11/15/s3_signed_urls_cloudfront/
return req.Presign(expiration)
}
You will probably also need to add a CloudFront layer so your file urls have the same origin. I guess this is why they cannot be previewed in StackBlitz. If you want CloudFront to properly cache the images you will have to round the current time as I wrote in my TODO: comment.
from core.
StackBlitz is now able to show images from the assets folder. Here is an example:
https://stackblitz.com/edit/github-logo-not-showing
from core.
Thank you all for your patience - We are launching new core technology into beta next month that should resolve this issue so this will be closed accordingly. If this issue persists, feel free to tag me or ask to reopen this issue with screenshots of the error. Thank you! :)
from core.
Related Issues (20)
- Wissen Demo App
- Relative path is not working
- StackBlitz preview opens in full screen every time I embed it in my code.
- Support prettier formatting for Angular HTML template files
- Page keeps scrolling back when I try to edit a code HOT 1
- Python Pip HOT 1
- Stackblitz installs newer dependencies randomly which breaks my project
- Better delete confirmation message
- The Project is not running in the browser HOT 1
- ReadableStream not supports AsyncIterator HOT 1
- can't open this example HOT 1
- Not working
- Sign Git commit Message via GPG
- syntax highlighting in html template literals
- URL issue
- takes tomuch time to install and even after taking long time the browser is not open HOT 1
- Preview Loading Issue
- contantly pasting aleatory text HOT 1
- Routing issues
- Stuck at Starting dev server
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from core.