SvelteKit项目中加载Directus图片失败，如何解决？

核心问题排查与解决步骤 #

• 端口指向错误
  你当前把资源路径指向了SvelteKit的服务端口（5173），但Directus的静态资源服务默认运行在8055端口。直接修正地址即可：

  <img src={`http://localhost:8055/assets/${image}`} alt={item} />
  

• 文件字段取值错误
  如果你的image字段是Directus的「文件」类型，返回的不是纯ID字符串，而是包含id、url等属性的对象。需要取正确的字段属性：

  // 若字段返回文件对象，提取id拼接路径
  <img src={`http://localhost:8055/assets/${image.id}`} alt={item} />
  // 或直接使用Directus返回的完整url（需后台配置正确的公共访问地址）
  <img src={image.url} alt={item} />
  

• 资源权限未开放
  如果图片没有设为「公共访问」，Directus会拒绝未授权请求。两种解决方式：

  • 在Directus后台，找到对应文件集合的权限设置（设置→权限→目标集合），勾选「公共读」权限
  • 若为私有资源，需在请求头中携带Directus的访问token

• 用SvelteKit代理隐藏Directus地址
  不想直接暴露Directus端口的话，可在vite.config.js中配置代理：

  export default {
    server: {
      proxy: {
        '/directus-assets': {
          target: 'http://localhost:8055/assets',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/directus-assets/, '')
        }
      }
    }
  }
  

  之后图片路径改为：

  <img src={`/directus-assets/${image.id}`} alt={item} />
  

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