Cannot pass "src" as prop while using @sveltejs/enhanced-img
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the bug
I wanted to created a simple hero component where I would pass the hero image dynamically, but I got error if enhanced:img used instead of img:
TypeError: Cannot read properties of undefined (reading 'src')
Code provided at "Reproduction" working correctly if I use simple img tag.
Reproduction
You need a JPG image named innerhero.jpg at /src/img/ folder
+page.svelte
<script>
import Hero from '$lib/template/Hero.svelte';
</script>
<Hero backgroundImage="$lib/img/innerhero.jpg" />
Hero.svelte
<script>
export let backgroundImage;
</script>
<enhanced:img src="{backgroundImage}" class="absolute inset-0 object-cover w-full h-full" alt="An alt text" />
I have also tried:
+page.svelte:
<script>
import Hero from '$lib/template/Hero.svelte';
import HeroImg from '$lib/img/innerhero.jpg';
</script>
<Hero backgroundImage="{HeroImg}" />
Logs
No response
System Info
System:
OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
CPU: (8) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz
Memory: 4.02 GB / 7.69 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 21.1.0 - ~/.nvm/versions/node/v21.1.0/bin/node
Yarn: 1.22.19 - /usr/bin/yarn
npm: 10.2.5 - ~/.nvm/versions/node/v21.1.0/bin/npm
pnpm: 8.12.1 - ~/.nvm/versions/node/v21.1.0/bin/pnpm
bun: 1.0.15 - ~/.bun/bin/bun
npmPackages:
@sveltejs/adapter-auto: ^3.1.0 => 3.1.0
@sveltejs/enhanced-img: ^0.1.7 => 0.1.7
@sveltejs/kit: ^2.0.6 => 2.0.6
@sveltejs/vite-plugin-svelte: ^3.0.1 => 3.0.1
svelte: ^4.2.8 => 4.2.8
vite: ^5.0.11 => 5.0.11
Severity
annoyance
Additional Information
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Run the supplied reproduction with +page.svelte, Hero.svelte, and @sveltejs/enhanced-img, using the stated image path and package versions as a baseline. Trace how the backgroundImage prop reaches the enhanced:img src handling and compare it with the working img case. Done means the dynamic prop renders without the reported undefined-src TypeError.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100