Dynamic images

[MassivDash]

Hello, new to svelte development, just trying to set up a simple blog with Image component, however, it seems that src set for dynamic posts made from markdown files throws an error about Mustache Tag. What's the correct way to implement Image component on a post template?

[happycollision]

~The problem is that if you want to use any Svelte components, you'll have to actually invoke them inside a real Svelte file. So unfortunately, the example repo isn't set up in a way that allows you to do such a thing. And it isn't really a concern of this project to address it (or even possible for us to).~

I misunderstood your issue!

See matynya's comment below.

For posterity:

I have built a workaround into my current project where I build actual Svelte files from the markdown files and just make sure that they aren't checked into source control.

The bonus there is that I can continue to use markdown for writing simple stuff, and I can throw in a Svelte component when I really need to.

The downside is that, currently, any adjustments to the markdown file are not live-reloaded during development. (That is just a matter of setting up some scripts to update the built Svelte files.)

Feel free to have a look at the code: https://github.com/postplayhouse/postplayhouse.com

But take warning: Because it is a work in progress, there are some pretty big flaws in the way I am doing a few things that I will not get around to fixing for a while, so you probably shouldn't copy what I am doing exactly. For example, I am loading a TON of unnecessary data at the moment inside both the service worker and an object called data that I pull in on every page via the _layout.svelte file.

[matyunya]

The problem isn't markdown (take a look here: https://github.com/matyunya/teatralium-smelte/blob/master/src/routes/articles/aktyora_nado_mordoy_v_govno.svexy). The thing is Svelte Image can't resolve image paths from imports or variables as in <Image src={dynamicUrl} /> since preprocessor is only aware of component's source code at the moment.

[happycollision]

I was guessing that MassivDash was just using the base setup from the Sapper tutuorial, which just feeds strings into a component from a json call. Perhaps a bad assumption.

However, what is this svexy magic? I need to dive into that repo a bit more and see what it is you've set up in there! That will probably work much better for my site.

[matyunya]

This is the error:

  if (value.type === "MustacheTag" || value.type === "AttributeShorthand") {
    return willNotProcess(`Cannot process a dynamic value: ${value.type}`);
  }

meaning either <Image src={var} /> or <Image {src} >.

I think we should aim for supporting following:

<script>
  import img1 from "path-we-resolve";

  const src = "string-path";

</script>

<Image src={img1} /> or <Image {src} />

DM me if you need help with setting up image + mdsvex.

[MassivDash]

Hello, after looking around I can definitely tell it's the dynamic value issue. I create posts from md files, each post has a photo cover, I just wanted to added Image component support for that cover on a post template and when I display post list. The Image component gets injected, but with no src set, moustache error is thrown. I just started with svelte, but my guess would be that svelte rollup plugin needs a afterproccessor section, that does the same but after everything is complied. Anyway if you have any workaround I'll be interested.

[matyunya]

But you do need to set src on Image, and it has to be a string. As far as configuration goes, please refer to my repo: https://github.com/matyunya/teatralium-smelte/blob/master/rollup.config.js.

[ryanfiller]

Hi, wondering if this was ever completely resolved. I'm using the latest version of MDSveX's custom components and am running into the same dynamic path issue. I can log the src prop out and see that it is a string literal that corresponds to an existing image.

[janosh]

Wondering the same as @ryanfiller.

[happycollision]

I can log the src prop out and see that it is a string literal that corresponds to an existing image.

Unless further work is done to attempt to resolve some of these simpler variables, it doesn't really matter what the logged value for your src is. (As a matter of fact, if it wasn't a string when you logged it, then it'd never show up in Svelte at all.) The actual code you've written inside the <Image> tag must be a string literal:

<script>
  const src = "path/to/image.jpg"
  console.log(src) // logs as a string
</script>

<Image src={src} />                  <!-- does not work -->
<Image src="path/to/image.jpg" />    <!-- works -->

I know that @matyunya would like to someday do some resolution on simple variables so that if you set a variable to a string literal, it'd work. But that, as far as I am aware, hasn't been done yet. His example above is notional, not currently working code.

Perhaps the error returned is confusing because it reads as a string.

return willNotProcess(`Cannot process a dynamic value: ${value.type}`);

Maybe it should explain a bit more. Or refer to this issue? 🤔