Svelte中img标签本地正常但预览环境无法显示问题求助

方案一：使用Public目录（推荐） #

1. 在项目根目录的public文件夹下创建assets目录，将todo_list.png放入其中（最终路径：public/assets/todo_list.png）
2. 修改img标签的src为根相对路径：

   <img src="/assets/todo_list.png" alt="todo list" />
   

   原理：public目录下的文件会被完整复制到build后的输出根目录，根相对路径能确保开发和预览环境都能正确定位资源。

方案二：通过ES模块导入图片 #

1. 在Svelte组件中按如下方式导入图片：

   <script>
     import todoImg from '$lib/assets/todo_list.png';
   </script>
   
   <img src={todoImg} alt="todo list" />
   

   原理：Svelte默认使用的Vite打包工具会处理这种导入，自动将图片复制到build输出目录，并生成带哈希的正确路径，同时避免缓存问题。你之前遇到的“短暂显示后空白”，大概率是导入方式错误——比如未用变量绑定src，或是$lib路径配置有误（SvelteKit中$lib默认指向src/lib目录）。

原路径失效的原因 #

开发模式下Vite可以直接解析src/lib/assets下的文件路径，但build时，src目录下的非源码文件（如图片）不会被自动复制到输出目录，除非通过ES模块导入或放在public目录，因此预览时会出现资源找不到的情况。

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