提供商
Storyblok
Nuxt Image 内部使用 Storyblok 作为静态提供商。
Storyblok 和图片模块之间的集成。要使用此提供商，您只需在 Storyblok 中指定服务的基本 URL。
nuxt.config.ts
export default defineNuxtConfig({
image: {
storyblok: {
baseURL: 'https://a.storyblok.com'
}
}
})
Storyblok 修饰符
我遵循 Storyblok 图片服务 上存在的所有修饰符。
调整大小
如果您想了解更多信息，请查看 Storyblok 文档。
逻辑是
- 如果您没有定义宽度或高度，则图片不会调整大小。
- 如果您只定义宽度或高度，则图片将根据您定义的宽度或高度按比例调整大小。
示例
<div>Original</div>
<NuxtImg
provider="storyblok"
src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
/>
<div>Resized static</div>
<NuxtImg
width="500"
height="500"
provider="storyblok"
src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
/>
<div>Proportional to Width</div>
<NuxtImg
width="500"
provider="storyblok"
src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
/>
<div>Proportional to Height</div>
<NuxtImg
height="500"
provider="storyblok"
src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
/>
与背景混合或不混合
如果您想了解更多信息，请查看 Storyblok 文档。
如果您想使用它，只需添加一个道具 fit="in"。注意，storyblok 仅支持 fit-in。
您还可以使用填充过滤器用特定背景填充您的 fit-in。如果您没有定义值，它将是透明的。
示例
<div>Fit in with background CCCCCC</div>
<NuxtImg
width="200"
height="200"
fit="in"
:modifiers="{ filters: { fill: 'CCCCCC' } }"
provider="storyblok"
src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
/>
格式
如果您想了解更多信息，请查看 Storyblok 文档。
您可以修改图片格式。支持的格式有 webp、jpeg 和 png。
示例
<h3>Format</h3>
<NuxtImg
width="200"
format="webp"
provider="storyblok"
src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
/>
质量
如果您想了解更多信息，请查看 Storyblok 文档。
您可以通过定义质量过滤器来更新图片质量。
示例
<div class="flex">
<div>Resized and 10% Quality</div>
<NuxtImg
provider="storyblok"
width="200"
quality="10"
src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
/>
</div>
面部检测
如果您想了解更多信息，请查看 Storyblok 文档。
要进行智能裁剪，只需在修饰符内定义一个智能属性。
示例
<h3>Facial detection</h3>
<div>Resized without Smart Crop</div>
<NuxtImg
width="600"
height="130"
provider="storyblok"
src="https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg"
/>
<div>Resized with Smart Crop</div>
<NuxtImg
width="600"
height="130"
:modifiers="{ smart: true }"
provider="storyblok"
src="https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg"
/>
自定义焦点
如果您想了解更多信息，请查看 Storyblok 文档。
Storyblok 允许您将焦点定位到图片的特定部分。只需使用 focal 过滤器。
示例
<div>Focus on the bottom of the image</div>
<NuxtImg
width="600"
height="130"
:modifiers="{ filters: { focal: '450x500:550x600' } }"
provider="storyblok"
src="https://a.storyblok.com/f/39898/1000x600/d962430746/demo-image-human.jpeg"
/>
<div>Focus on the top of the image</div>
<NuxtImg
width="600"
height="130"
:modifiers="{ filters: { focal: '450x0:550x100' } }"
provider="storyblok"
src="https://a.storyblok.com/f/39898/1000x600/d962430746/demo-image-human.jpeg"
/>