Getting an error of 'aspectRatio' must be provided for remote images when using a local image even when importing in frontmatter when using the #astrojs/image integration. The imported image is in /src/images
As far as I can see this is exactly the same as the example provided in the #astrojs/image docs. I have also even tried the inline import method, but it still hasn't worked.
---
import { Picture } from "#astrojs/image/components";
import florence from "../images/florence-3.jpg";
---
<section class="showcase">
<div class="showcase-bg">
<Picture
src={florence}
widths={[200, 400, 800]}
sizes="(max-width: 800px) 100vw, 800px"
alt="Florence Smith Project Manager Picture"
/>
</div>
</section>
Thanks for any help!
Here a working example with a code same as yours
Astro SSR with node standalone
Node 16 (Node18 yields a fetch failed issue so not compatible yet with the integration)
see detailed environment in the repo
/pages/picture.astro
---
import MyPicture from '../components/MyPicture.astro';
---
<MyPicture/>
MyPicture.astro
---
import { Picture } from '#astrojs/image/components';
import florence from "../assets/test.png";
---
<Picture
src={florence}
widths={[200, 400, 800]}
sizes="(max-width: 800px) 100vw, 800px"
alt="Florence Smith Project Manager Picture"
/>
github repo : https://github.com/MicroWebStacks/astro-examples#16_images
Stackbltiz : https://stackblitz.com/github/MicroWebStacks/astro-examples/tree/main/16_images
the first link /picture is working
Related
Is there a recommended way or best practice to apply the css rules of "global" default or custom themes to the shadow root of custom components created with a lit template?
There is a workaround with a connectedCallback to manually apply the theme with an imported "applyTheme()" function. Another description of the issue and the workaroundsee here
I have also found a ticket, with some sort of solution, but i just can't figure out how to use this to solve my issue.
That workaround doesn't seem to work when working with the Vaadin Designer plugin in intellij, as it doesn't seem to be able to use the "applyTheme()" function (unresolved import of "import { applyTheme } from frontend/generated/theme"). Also i'd like to avoid this workaround where possible.
If there is another solution than using the mentioned workaround, does it also work with custom themes / changed values of lumo css properties?
Example:
You create a custom component based on a lit template like this:
import '#vaadin/vaadin-ordered-layout/vaadin-horizontal-layout';
import '#vaadin/vaadin-ordered-layout/vaadin-vertical-layout';
import '#vaadin/vaadin-select';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import {applyTheme} from "Frontend/generated/theme";
#customElement('stub-view-card')
export class StubViewCard extends LitElement {
//commented this, so we DO use a shadow root
/*createRenderRoot() {
// Do not use a shadow root
return this;
}*/
connectedCallback() {
super.connectedCallback();
// Apply the theme manually because of https://github.com/vaadin/flow/issues/11160
//this is not needed, if no shadow root like above is used
applyTheme(this.renderRoot);
}
render() {
return html`<li class="bg-contrast-5 flex flex-col items-start p-m rounded-l">
<div
class="bg-contrast flex items-center justify-center mb-m overflow-hidden rounded-m w-full"
style="height: 160px;"
>
<img id="image" class="w-full" />
</div>
<span class="text-xl font-semibold" id="header"></span>
<span class="text-s text-secondary" id="subtitle"></span>
<p class="my-m" id="text"></p>
<span theme="badge" id="badge"></span>
<slot></slot>
</li> `;
}
}
how it should look like
how it looks like without the connectedCallback and applyTheme()
I am using Vaadin 23 and a project generated from vaadin starter. My example was created from the "image list"-template.
I really appreciate any help and documentation that you can point me to :)
I have in my Next.js project a card component with a backgroundImage from my Strapi API.
The image is shown in local but when I deploy my project in Vercel it doesn't show the background image even if the link is ok...
I cannot put the image in public folder because I have to get it from Strapi
Someone has an idea why ?
import { getStrapiURL } from "../../../lib/api"
export default function SliderLargeScreen({ index, project }) {
const backgroundImage = getStrapiURL(
project.attributes.image.data.attributes.url
)
return (
<div index={index}>
<div
style={{
backgroundImage: `url(${backgroundImage})`,
height: "350px",
}}
className="relative bg-cover bg-center w-full flex flex-col rounded-md "
>
Ok, I have fixed my issue, it was a stupid mistake but it can help if somebody has the same error :
I was still testing my app and my backend was on my vps server but whithout ssl certificate, so Vercel didn't want to get pictures with http://upload/.....png instead of https://..... because of security conflict.
I installed a SSL certificate on my subdomains and now it's OK ! :)
I am receiving data from a json file where each object has following data about a show/musical :
{
"Theatre": [
{
"name": "Hairspray",
"type": "Musical",
"role": "Dynamite",
"director": "Sue Ellen Nielson",
"company": "Stage 1 / East Bay Area",
"year": "2012",
"posterImage" : "hairsprayPoster.jpg"
} .....
]
}
on the Vue file I have :
<ul class="show-gallery-list">
<li v-for="dataItem in myJson['Theatre']" >
{{dataItem.coverImage}} //this prints the path as a string
<img :src="dataItem.coverImage"> //this renders an empty image icon
</li>
</ul>
All the other data is accessible and renders.
I have tried everything with v-bind:src
I have tried to import the folder of images but that doesn't work either.
Will parcel not allow for me to render an image dynamically?
Do I have to import all images ?
Is this a bundling issue ?
This is actually not that straight forward to with parcelJS there is a whole GitHub issue conversation which discusses the possible alternatives to getting around this problem
The most promising from a glance appeared to be this plugin
A more naive way of achieving this would be to run your parcel build, then, create a new directory in the build files and copy over all your static assets there. If you run your parcel build folder from a HTTP server, your static files will also be there in the folder you created. You just need to make sure your path is correctly constructed.
I'm trying to add CKfinder to a website with the CKfinder package for Laravel.
The attempt to insert an image ends with an alert and fails.
screenshots here
Installation (Laravel 5.7, updated)
inclusion of CKeditor 5 (inline) build without option
installation of CKfinder as specified here:
https://github.com/ckfinder/ckfinder-laravel-package
basic implementation (authentication returns true)
inclusion of #include('ckfinder::setup') in the blade template
added ckfinder to the InlineEditor instance
ckfinder: {
uploadUrl: baseurl +'/ckfinder/connector?command=QuickUpload&type=Images',
options: {
resourceType: 'Images'
}
},
Behaviour:
OK:
The page is opened without error.
CKeditor is open, works normally and saves its text.
Image button calls the file selector.
The selected image is displayed in CKEditor div.
code:
<div class="ck5editable"">
<img src="data:image/jpeg;base64,/9j/4SY7RXhpZgAAT [...] AAAAAAAAAAAAA=">
<figcaption class="ck-editor__editable ck-editor__nested-editable ck-placeholder" data-placeholder="Saisir la légende de l’image" contenteditable="true">
<br data-cke-filler="true">
</figcaption>
<div class="ck-progress-bar" style="width:100%;"></div>
</figure>
<div style="position: fixed; top: 0px; left: -9999px; width: 42px;">Objet image</div>
</div>
The selected image is correctly transmitted to the server (screenshot 3, apache log)
Image is saved in the intended location (screenshot 2, file tree)
BUT THEN:
An alert is displayed: "Sending failed file: <filename>."
After[OK], the image disappears from the editor and its html code
The console indicates two resources from XHR:
"blob": the image (screenshot safari-console-blob)
"connector": a script (screenshot safari-console-connector)
<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction("", "http:\/\/127.0.0.1\/siteh57\/public\/userfiles\/images\/[filename]", "");
</script>
I only see one weird thing: in this last script, the call to the function starts with an empty parameter.
Is there another mistake?
Does anyone have an idea or at least a lead?
I am learning reactjs from gatsby framework where i am trying to change the title of the website by using site.siteMetadata but getting an error as "data is not defined" and also html static pages build failed.
{data.site.siteMetadata.title}
^
error
import React from "react";
import g from "glamorous";
import {css} from "glamour";
import Link from "gatsby-link"
import {rhythm} from "../utils/typography";
const linkstyle=css({float:'right'});
exports.default=
({children})=>
<g.Div margin={'0 auto'}>
maxwidth={700}
padding={rhythm(1.5)}>
<Link to={'/'}>
<g.H3
marginBottom={rhythm(2)}
display={'inline-Block'}
fontStyle={'normal'}>
{data.site.siteMetadata.title}
</g.H3>
</Link>
<Link classname={linkStyle} to={'/about/'}>
About
</Link>
{children()}
</g.Div>
export const query=graphql
'query LayoutQuery{
site{
siteMetadata{
title
}
}
}
##
----------
If you're using gatsby v2 you should follow the tutorial for v2:
https://next.gatsbyjs.org/tutorial/part-four/
The children() isn't valid syntax anymore in Gatsby v2.