How to concatenate a variable and a string within fences? | Astro Lounge | Page 1

spark cloak Oct 7, 2022, 3:40 PM

#

I'm trying to pass in an image size as a prop and generate a placeholder image but my code isn't working.. What am I doing wrong?

`---
const { size} = Astro.props;
import image from "~/assets/images/placeholders/${size}.png}";

<img class="w-full" src={image.src}>`

quartz flume Oct 7, 2022, 3:43 PM

#

I think you need to be using backticks for string literal interpolation:

const { size} = Astro.props;
import image from `~/assets/images/placeholders/${size}.png}`;

#

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Template literals (Template strings) - JavaScript | MDN

Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.

#

But also, if you import image this way, you should set the src like this

<img class="w-full" src={image}>

image.src would be undefined, because image is the string (path) you defined in your codefence.

split atlas Oct 7, 2022, 3:52 PM

#

quartz flume I think you need to be using backticks for string literal interpolation: ``` con...

there is also an additional } on the right that I think needs to be removed(?)

#

const { size} = Astro.props;
import image from `~/assets/images/placeholders/${size}.png`;

#

except, of course, for if the image extension is .png}

quartz flume Oct 7, 2022, 3:56 PM

#

Sorry -- answering too rapidly 😄

Dynamic importing is not legal syntax in ES6 or Typescript, because dependencies are always supposed to be statically resolvable. So your editor will still complain that it expects a string literal.

spark cloak Oct 7, 2022, 4:00 PM

#

quartz flume https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_liter...

I realised, I can just use

{`http://via.placeholder.com/${size}`}

#

but now this isn't working..

---
import Picture from '~/components/core/Picture.astro';
const {size} = Astro.props;
---
<Picture
  alt="placeholder"
  width={size}
  height={size}
  sizes="(max-width: 600px) 100vw, 600px"
  src={`http://via.placeholder.com/${size}`} />```

#

`

quartz flume Oct 7, 2022, 4:05 PM

#

If you use a remote source for your image, you need to also define the aspectRatio: https://docs.astro.build/en/guides/images/#remote-images-1

(I guess that's maybe not the case if you provide height yourself though...?)

Astro Documentation

Images

Learn how to use images in Astro.

stark scaffold Oct 7, 2022, 4:07 PM

#

You could also you dynamic imports if you don't want to use the Picture component
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import

import - JavaScript | MDN

The import() call, commonly called dynamic import, is a function-like expression that allows loading an ECMAScript module asynchronously and dynamically into a potentially non-module environment.

spark cloak Oct 7, 2022, 4:09 PM

#

quartz flume If you use a remote source for your image, you need to also define the `aspectRa...

Nope, didn't work

---
import Picture from '~/components/core/Picture.astro';
const {size} = Astro.props;
---
<Picture
  alt="placeholder"
  width={size}
  aspectRatio={16/9}
  sizes="(max-width: 600px) 100vw, 600px"
  src={`http://via.placeholder.com/${size}`} />

quartz flume Oct 7, 2022, 4:13 PM

#

What isn't working -- do you get any errors in your terminal?

#How to concatenate a variable and a string within fences?

`--- const { size} = Astro.props; import image from "~/assets/images/placeholders/${size}.png}";

`---
const { size} = Astro.props;
import image from "~/assets/images/placeholders/${size}.png}";