无法运行svelte-easy-crop基础示例问题求助

针对你使用svelte-easy-crop仅显示灰色方块的问题，可按以下步骤逐一排查：

1. 先确认图片是否能正常加载 #

灰色方块通常是图片未成功加载的表现，先抛开Cropper组件，单独验证图片路径是否有效：

<img src="/images/dog.jpeg" on:error={() => console.log('图片加载失败')} />

• 如果控制台输出加载失败，检查图片是否放在项目public目录下（Svelte项目中，根路径资源需存放在public文件夹）；
• 也可尝试使用绝对URL（如https://example.com/dog.jpeg）测试，排除本地路径问题。

2. 给Cropper组件设置明确尺寸 #

svelte-easy-crop依赖父容器或自身的宽高约束，否则会收缩到最小尺寸。给组件外层加带固定尺寸的容器：

<div style="width: 600px; height: 400px;">
  <Cropper
    {image}
    bind:crop
    bind:zoom
    on:cropcomplete={e => console.log(e.detail)}
  />
</div>

或直接给Cropper设置相对尺寸：

<Cropper
  {image}
  bind:crop
  bind:zoom
  on:cropcomplete={e => console.log(e.detail)}
  style="width: 100%; height: 50vh;"
/>

3. 检查版本兼容性 #

确认svelte-easy-crop版本与你的Svelte版本匹配：

• 若使用Svelte 4，安装适配的库版本（可查看库的peerDependencies），执行：

  npm install svelte-easy-crop@^4.0.0
  

• 若使用Svelte 3，安装对应版本：

  npm install svelte-easy-crop@^3.0.0
  

4. 调试组件内部加载状态 #

利用Cropper提供的事件监听图片加载情况：

<script>
  import Cropper from 'svelte-easy-crop'
  let image = '/images/dog.jpeg'
  let crop = { x: 0, y: 0 }
  let zoom = 1

  function handleImageLoad() {
    console.log('Cropper图片加载完成')
  }
</script>

<Cropper
  {image}
  bind:crop
  bind:zoom
  on:cropcomplete={e => console.log(e.detail)}
  on:imageLoad={handleImageLoad}
  on:imageError={() => console.log('Cropper内部图片加载失败')}
/>

通过控制台输出判断是图片路径问题，还是组件内部渲染异常。

5. 排查全局样式冲突 #

若项目中有全局样式重置（如reset.css），可能影响Cropper布局。临时注释全局样式，或添加针对性样式覆盖：

:global(.svelte-easy-crop-container) {
  width: 100%;
  height: 100%;
}

内容的提问来源于stack exchange，提问作者GR4