Comments (13)
istarkov
commented on July 24, 2024
As described here
https://docs.webstudio.is/university/self-hosting-and-cli
And see no issue with images.
Also from my knowledge this image link is impossible on our system my_wow_image_plus_random_chars.png we have hash in image names etc. Can you provide an example project with share link or like. Can you show screenshot like above what options were selected. As I can't reproduce images issues.
Or can you reproduce this using my project https://apps.webstudio.is/builder/41281bd5-6dd3-4319-a5af-56175126e971?authToken=765e2686-7687-456c-bc79-624bb9bae221&mode=preview
from webstudio.
kof
commented on July 24, 2024
from webstudio.
kof
commented on July 24, 2024
@istarkov he clearly replaced the image original name, so that name is just an example
from webstudio.
pvi-github
commented on July 24, 2024
Hello,
Here is what i did :
$ mkdir test2
$ cd test2
$ webstudio link
$ webstudio
(choose vanilla)
$ npm install --legacy-peer-deps
$ npm install -g serve
$ npm run devIn this case i correctly see the kitten image...
And the resulting HTML code looks like this :
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta property="og:url" content="https://localhost:5173/"/><title>Home</title><meta property="og:title" content="Home"/><meta property="og:type" content="website"/><link rel="icon" href="[/favicon.ico](http://localhost:5173/favicon.ico)" type="image/x-icon"/><link rel="shortcut icon" href="[/favicon.ico](http://localhost:5173/favicon.ico)" type="image/x-icon"/><link rel="modulepreload" href="[/@id/__x00__virtual:remix/browser-manifest](http://localhost:5173/@id/__x00__virtual:remix/browser-manifest)"/><link rel="modulepreload" href="[/node_modules/@remix-run/dev/dist/config/defaults/entry.client.tsx](http://localhost:5173/node_modules/@remix-run/dev/dist/config/defaults/entry.client.tsx)"/><link rel="modulepreload" href="[/app/root.tsx?client-route=1](http://localhost:5173/app/root.tsx?client-route=1)"/><link rel="modulepreload" href="[/app/routes/_index.tsx?client-route=1](http://localhost:5173/app/routes/_index.tsx?client-route=1)"/><link rel="stylesheet" href="[/app/__generated__/index.css](http://localhost:5173/app/__generated__/index.css)"/></head><body data-ws-id="xyDQc8TfppfH7VUJisy1k" data-ws-component="Body"><img alt="" data-ws-id="zPbOKbo48TWETrtMguMuH" data-ws-component="Image" src="[/assets/1_1(1)____9Uv5UURmNnsy_bgGc3T_C.png](http://localhost:5173/assets/1_1(1)____9Uv5UURmNnsy_bgGc3T_C.png)" width="128" height="128" sizes="100vw" srcSet="[/assets/1_1(1)____9Uv5UURmNnsy_bgGc3T_C.png 16w](http://localhost:5173/assets/1_1(1)____9Uv5UURmNnsy_bgGc3T_C.png),[ /assets/1_1(1)____9Uv5UURmNnsy_bgGc3T_C.png 32w](http://localhost:5173/assets/1_1(1)____9Uv5UURmNnsy_bgGc3T_C.png),[ /assets/1_1(1)____9Uv5UURmNnsy_bgGc3T_C.png 48w](http://localhost:5173/assets/1_1(1)____9Uv5UURmNnsy_bgGc3T_C.png),[ /assets/1_1(1)____9Uv5UURmNnsy_bgGc3T_C.png 64w](http://localhost:5173/assets/1_1(1)____9Uv5UURmNnsy_bgGc3T_C.png),[ /assets/1_1(1)____9Uv5UURmNnsy_bgGc3T_C.png 96w](http://localhost:5173/assets/1_1(1)____9Uv5UURmNnsy_bgGc3T_C.png),[ /assets/1_1(1)____9Uv5UURmNnsy_bgGc3T_C.png 128w](http://localhost:5173/assets/1_1(1)____9Uv5UURmNnsy_bgGc3T_C.png),[ /assets/1_1(1)____9Uv5UURmNnsy_bgGc3T_C.png 256w](http://localhost:5173/assets/1_1(1)____9Uv5UURmNnsy_bgGc3T_C.png)" decoding="async" loading="lazy"/><script>window.__remixContext = {"url":"/","basename":"/","future":{"v3_fetcherPersist":false,"v3_relativeSplatPath":false,"v3_throwAbortReason":false,"unstable_singleFetch":false},"isSpaMode":false,"state":{"loaderData":{"routes/_index":{"host":"localhost:5173","url":"https://localhost:5173/","system":{"params":{},"search":{},"origin":"https://localhost:5173"},"resources":{},"pageMeta":{"title":"Home","custom":[]}},"root":null},"actionData":null,"errors":null}};</script><script type="module" async="">import "/@id/__x00__virtual:remix/inject-hmr-runtime";import "/@id/__x00__virtual:remix/browser-manifest";
import * as route0 from "/app/root.tsx?client-route=1";
import * as route1 from "/app/routes/_index.tsx?client-route=1";
window.__remixRouteModules = {"root":route0,"routes/_index":route1};
import("/node_modules/@remix-run/dev/dist/config/defaults/entry.client.tsx");</script><script>((STORAGE_KEY, restoreKey) => {
if (!window.history.state || !window.history.state.key) {
let key = Math.random().toString(32).slice(2);
window.history.replaceState({
key
}, "");
}
try {
let positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "{}");
let storedY = positions[restoreKey || window.history.state.key];
if (typeof storedY === "number") {
window.scrollTo(0, storedY);
}
} catch (error) {
console.error(error);
sessionStorage.removeItem(STORAGE_KEY);
}
})("positions", null)</script></body></html>Here the kitten image is local and ok.
Did you create this new project online through https://apps.webstudio.is/ ?
from webstudio.
istarkov
commented on July 24, 2024
Did you create this new project online through https://apps.webstudio.is/ ?
yes
from webstudio.
pvi-github
commented on July 24, 2024
Ok I re-did the whole process with just one image.
- https://apps.webstudio.si/dashboard
- New project
- Upload an image in assets
- click on "plus" to add an image in the design
- Display image settings in the right pane
- drag'n drop the asset image in the url field of the image
=> The image is displayed in the webapp
-
Click on share and generate a link with build option
-
Publish
-
Redo the local process :
$ mkdir test2
$ cd test2
$ webstudio link
$ webstudio
(choose vanilla)
$ npm install --legacy-peer-deps
$ npm install -g serve
$ npm run devResult :
And the generated code :
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta property="og:url" content="https://localhost:5173/"/><title>Home</title><meta property="og:title" content="Home"/><meta property="og:type" content="website"/><link rel="icon" href="[/favicon.ico](http://localhost:5173/favicon.ico)" type="image/x-icon"/><link rel="shortcut icon" href="[/favicon.ico](http://localhost:5173/favicon.ico)" type="image/x-icon"/><link rel="modulepreload" href="[/@id/__x00__virtual:remix/browser-manifest](http://localhost:5173/@id/__x00__virtual:remix/browser-manifest)"/><link rel="modulepreload" href="[/node_modules/@remix-run/dev/dist/config/defaults/entry.client.tsx](http://localhost:5173/node_modules/@remix-run/dev/dist/config/defaults/entry.client.tsx)"/><link rel="modulepreload" href="[/app/root.tsx?client-route=1](http://localhost:5173/app/root.tsx?client-route=1)"/><link rel="modulepreload" href="[/app/routes/_index.tsx?client-route=1](http://localhost:5173/app/routes/_index.tsx?client-route=1)"/><link rel="stylesheet" href="[/app/__generated__/index.css](http://localhost:5173/app/__generated__/index.css)"/></head><body data-ws-id="3Uvo6JWWrwrMud_neTK2j" data-ws-component="Body"><img loading="lazy" data-ws-id="LZpIBqncJ-TXHh_2hpp0G" data-ws-component="Image" src="[https://apps.webstudio.is/cgi/image/20160504_122449_Zv7-DhDiZeaepTIi0nmYV.jpg?width=128&quality=80&format=auto](https://apps.webstudio.is/cgi/image/20160504_122449_Zv7-DhDiZeaepTIi0nmYV.jpg?width=128&quality=80&format=auto)" class="cpsolwf cvn8r8k cl2sxwl"/><script>window.__remixContext = {"url":"/","basename":"/","future":{"v3_fetcherPersist":false,"v3_relativeSplatPath":false,"v3_throwAbortReason":false,"unstable_singleFetch":false},"isSpaMode":false,"state":{"loaderData":{"routes/_index":{"host":"localhost:5173","url":"https://localhost:5173/","system":{"params":{},"search":{},"origin":"https://localhost:5173"},"resources":{},"pageMeta":{"title":"Home","custom":[]}},"root":null},"actionData":null,"errors":null}};</script><script type="module" async="">import "/@id/__x00__virtual:remix/inject-hmr-runtime";import "/@id/__x00__virtual:remix/browser-manifest";
import * as route0 from "/app/root.tsx?client-route=1";
import * as route1 from "/app/routes/_index.tsx?client-route=1";
window.__remixRouteModules = {"root":route0,"routes/_index":route1};
import("/node_modules/@remix-run/dev/dist/config/defaults/entry.client.tsx");</script><script>((STORAGE_KEY, restoreKey) => {
if (!window.history.state || !window.history.state.key) {
let key = Math.random().toString(32).slice(2);
window.history.replaceState({
key
}, "");
}
try {
let positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "{}");
let storedY = positions[restoreKey || window.history.state.key];
if (typeof storedY === "number") {
window.scrollTo(0, storedY);
}
} catch (error) {
console.error(error);
sessionStorage.removeItem(STORAGE_KEY);
}
})("positions", null)</script></body></html>The shared url to test : here
from webstudio.
pvi-github
commented on July 24, 2024
The url of the image is as i described before (i did simplify):
<img loading="lazy" data-ws-id="LZpIBqncJ-TXHh_2hpp0G" data-ws-component="Image" src="[https://apps.webstudio.is/cgi/image/20160504_122449_Zv7-DhDiZeaepTIi0nmYV.jpg?width=128&quality=80&format=auto](https://apps.webstudio.is/cgi/image/20160504_122449_Zv7-DhDiZeaepTIi0nmYV.jpg?width=128&quality=80&format=auto)" class="cpsolwf cvn8r8k cl2sxwl"/>from webstudio.
istarkov
commented on July 24, 2024
Not sure how it's possible to do drag and drop ;-) As the only way to add images I know is to click on "Choose source" then click on image
In your case the issue that during drag and drop you are getting absolute URL in image src
from webstudio.
istarkov
commented on July 24, 2024
Any video with drag and drop would be very interesting to see, as I've tried to do that without any luck ;-)
from webstudio.
pvi-github
commented on July 24, 2024
Here you are.
simplescreenrecorder4-2024-05-23_18.51.48.mp4
from webstudio.
pvi-github
commented on July 24, 2024
So to sum up : my mistake was to drag'n drop from assets to url field instead of using the button choose asset.
Ok thanks for your time guys.
Btw : being able to drag'n drop from assets directly to content would be better for UX
from webstudio.
kof
commented on July 24, 2024
Btw : being able to drag'n drop from assets directly to content would be better for UX
Yes, we also want to add that!
from webstudio.
istarkov
commented on July 24, 2024
Thank you for the video. On osx images are not draggable into inputs, at least on my machine. Yes somekind of dragndrop would be good here
from webstudio.
Related Issues (20)
- Platform - Notion
- Add HTML Table Component(s)
- XML Node with title tag nested in any other XML Node breaks document HOT 1
- DOMContentLoaded not firing when directly going to the URL HOT 6
- Share access to project with account
- Quick stack paste causes duplicate local style icons
- Help Needed: Sorting Nested JSON Layer Tree with SortableJS in Alpine.js and Layer Management Techniques from WebStudio HOT 1
- Ability to set iframe title on Vimeo for accessibility HOT 1
- feature: "Screenshot/HTML" to Webstudio HOT 1
- Dashboard thumb gets replaced on publish HOT 1
- Navigator item should show as disabled when show is off
- Don't use label as a trigger for switch in settings HOT 2
- Disabling image optimize breaks image path HOT 1
- Highlight navigator item when hovering instances on canvas
- Increased width of navigator HOT 1
- SSG (Static site generation) export
- Add native tag support to webstudio
- Prevent token renaming using the same name
- Primevue UI Components support HOT 1
- Page title isn't getting updated
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 webstudio.