Solid.js组件动态加载图片抛出404错误，求可行解决方案

问题原因 #

你遇到的404是因为相对路径在路由页面下解析错误，且构建工具（如Vite）不会自动处理动态拼接的相对图片路径：

• 当页面在/creatures路由下时，../assets/...会被浏览器解析为/assets/creatureCardImages/...，若构建后资源的实际路径不符，就会报错。
• 硬编码import img from '../assets/...'能正常工作，是因为构建工具会将其替换为打包后的正确资源路径，但动态拼接的字符串不会被工具处理。

可行解决方案 #

方案1：使用根绝对路径 #

直接将图片路径改为以/开头的绝对路径，确保无论当前路由是什么，都从项目根目录查找资源：

// CreatureCard组件中修改img标签
<img src="/assets/creatureCardImages/Creaturecard_Antlion.png"/>

注意：Vite默认会将src/assets下的资源打包到dist/assets，此路径适配默认配置，若你的构建配置有修改，需对应调整路径。

方案2：动态匹配预加载的图片（适合从props动态获取路径） #

如果需要根据creature数据动态加载不同图片，可使用Vite的import.meta.glob预加载所有目标图片，再通过props匹配：

import { Show, For } from 'solid-js';
import "@styles/components/_creatureCard.scss";

// 预加载creatureCardImages下所有png图片，eager设为true表示立即加载
const creatureImages = import.meta.glob(
  '../assets/creatureCardImages/*.png',
  { eager: true, import: 'default' }
);

export default (props: any) => {
  const creature = props.creature;
  // 假设你的creature数据里有imageName字段，比如"Creaturecard_Antlion"
  const imagePath = `../assets/creatureCardImages/${creature.imageName}.png`;

  return (
    <div class="creatureCard" id={creature.Name + "_Card"}>
      <div class="creatureCard__header">
        <h1 class="creatureCard__header__name">{creature.Name}</h1>
        <img src={creatureImages[imagePath] as string} />
      </div>
    </div>
  )
}

方案3：将图片移至public目录 #

把图片放到项目根目录的public文件夹下（没有就新建），然后直接使用绝对路径访问：

// 假设图片放在public/creatureCardImages/下
<img src={`/creatureCardImages/${creature.imageName}.png`}/>

此方式下，public文件夹下的资源会被原封不动打包到dist根目录，不需要经过构建工具的资源处理。

验证建议 #

先尝试方案1快速验证路径是否正确，若仍报错，打开浏览器开发者工具的Network面板，查看图片请求的实际路径，对比资源的实际打包位置调整路径。

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