fix!: require src prop in <NuxtImg> and <NuxtPicture>#2143
fix!: require src prop in <NuxtImg> and <NuxtPicture>#2143DamianGlowala wants to merge 1 commit into
src prop in <NuxtImg> and <NuxtPicture>#2143Conversation
commit: |
Deploying nuxt-image with
|
| Latest commit: |
fadd9ad
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://3d82cd12.nuxt-image.pages.dev |
| Branch Preview URL: | https://fix-required-src-prop.nuxt-image.pages.dev |
📝 WalkthroughWalkthroughThe PR removes non-null assertions from props.src usage across NuxtImg and NuxtPicture components and upgrades the BaseImageProps interface to make the src property required instead of optional. This involves eliminating null-assertion operators when passing props.src to image utilities and updating component logic that relied on nullable src handling. Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/runtime/components/NuxtPicture.vue (1)
186-190: Consider:DefaultSlotPropsappears unused.The
defineSlotsat line 46 defines a default slot, but the template doesn't render any<slot>element, making this interface effectively dead code. This could be cleaned up or the slot functionality implemented if intended.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/runtime/components/NuxtPicture.vue` around lines 186 - 190, DefaultSlotProps is declared but never used because the component defines a default slot via defineSlots (around defineSlots/default slot) yet the template doesn't render a <slot>, so either remove the unused DefaultSlotProps interface or implement the slot: if you intend to expose the default slot, add a <slot> in the template that forwards imgAttrs, isLoaded and src (matching DefaultSlotProps) so consumers can use those props; otherwise delete the DefaultSlotProps declaration to clean up dead code and related unused types.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/runtime/components/NuxtPicture.vue`:
- Around line 186-190: DefaultSlotProps is declared but never used because the
component defines a default slot via defineSlots (around defineSlots/default
slot) yet the template doesn't render a <slot>, so either remove the unused
DefaultSlotProps interface or implement the slot: if you intend to expose the
default slot, add a <slot> in the template that forwards imgAttrs, isLoaded and
src (matching DefaultSlotProps) so consumers can use those props; otherwise
delete the DefaultSlotProps declaration to clean up dead code and related unused
types.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/runtime/components/NuxtImg.vuesrc/runtime/components/NuxtPicture.vuesrc/runtime/utils/props.ts
DamianGlowala
changed the title
src prop required for NuxtImg/NuxtPicturesrc prop in <NuxtImg> and <NuxtPicture>
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #2143 +/- ##
=======================================
Coverage 32.52% 32.52%
=======================================
Files 7 7
Lines 372 372
Branches 131 131
=======================================
Hits 121 121
Misses 194 194
Partials 57 57 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
DamianGlowala
changed the title
src prop in <NuxtImg> and <NuxtPicture>src prop in <NuxtImg> and <NuxtPicture>
|
Hi, Here is some example code (src optional): <script setup lang="ts">
const {
src = undefined,
sizes = '32px',
icon = 'tabler:photo',
} = defineProps<{
src?: string | null;
/** @default '32px' */
sizes?: string;
/** Icon name. @default 'tabler:photo' */
icon?: string;
}>();
</script>
<template>
<div>
<NuxtImg
v-slot="{ src: _src, isLoaded, imgAttrs }"
:sizes
:src="src || undefined"
:custom="true"
>
<!-- Show the actual image when loaded -->
<img v-if="isLoaded" v-bind="imgAttrs" :src="_src" />
<Icon v-else :name="icon" />
</NuxtImg>
</div>
</template>If src is required it would look something like this: <script setup lang="ts">
const {
src = undefined,
sizes = '32px',
icon = 'tabler:photo',
} = defineProps<{
src?: string | null;
/** @default '32px' */
sizes?: string;
/** Icon name. @default 'tabler:photo' */
icon?: string;
}>();
</script>
<template>
<div>
<Icon v-if="!src" :name="icon" />
<NuxtImg
v-else
v-slot="{ src: _src, isLoaded, imgAttrs }"
:sizes
:src="src || undefined"
:custom="true"
>
<!-- Show the actual image when loaded -->
<img v-if="isLoaded" v-bind="imgAttrs" :src="_src" />
<Icon v-else :name="icon" />
</NuxtImg>
</div>
</template>Or mabe like this: <script setup lang="ts">
const {
src = undefined,
sizes = '32px',
icon = 'tabler:photo',
} = defineProps<{
src?: string | null;
/** @default '32px' */
sizes?: string;
/** Icon name. @default 'tabler:photo' */
icon?: string;
}>();
const loaded = ref(false);
</script>
<template>
<div>
<Icon v-if="!loaded" :name="icon" />
<NuxtImg
v-if="src"
:sizes
:src="src"
@load="loaded = true"
/>
</div>
</template>Please tell me your thoughts on this, I hope my concern is understandable! |
|
I have made a PR that handles this without a breaking change. |
3 participants
🔗 Linked issue
📚 Description
Marks
srcprop as required inBaseImagePropstype (shared by both NuxtImg and NuxtPicture components).