React应用中对象属性存储的图片URL字符串无法显示，无需导入如何解决？

你遇到的路径失效问题是React生态下的打包工具（如Create React App、Vite等）的资源处理逻辑导致的：写在JavaScript字符串中的相对本地路径不会被打包工具识别为资源引入，打包后路径不会替换为编译后的实际资源路径，因此浏览器加载时会404。

方案1：将图片放入public静态资源目录 #

所有放在项目根目录public文件夹下的资源，打包时会被原封不动复制到输出目录的根路径，直接使用绝对路径引用即可：

• 操作步骤：将图片存放到public/images/user.png路径
• 代码调整：

import React, {Fragment, useState, useEffect} from 'react';

const Profile = (props) => {
  const [user, setUser] = useState(null);
  useEffect(() => {
    setUser({
      name: 'John',
      // 直接写根路径下的静态资源地址
      photo: '/images/user.png'
      // 若项目部署在域名子路径下，CRA项目可使用环境变量拼接：
      // photo: `${process.env.PUBLIC_URL}/images/user.png`
      // Vite项目使用：
      // photo: `${import.meta.env.BASE_URL}images/user.png`
    })
  }, [])
  
  return (
    <Fragment>
      <img src={user.photo} alt="photo" />
      <p>{user.name}</p>  
    </Fragment>
  )
}

该方案适合图片数量多、需要动态拼接路径引用、无需打包工具压缩处理的资源场景。

方案2：动态引入src目录下的图片 #

如果图片存放在src目录下需要打包工具处理（压缩、哈希重命名等），无需提前import，可通过对应打包工具的动态引入语法处理：

适配Create React App（webpack环境） #

使用require包裹路径，注意需要保留部分静态路径前缀让webpack可扫描识别资源：

// user对象中仅存储图片文件名即可
setUser({
  name: 'John',
  photo: 'user.png'
})
// 渲染时动态拼接路径引入
<img src={require(`./asset/images/${user.photo}`)} alt="photo" />

适配Vite环境 #

Vite不支持require语法，可使用new URL构造器动态生成资源路径：

// user对象中仅存储图片文件名即可
setUser({
  name: 'John',
  photo: 'user.png'
})
// 渲染时动态生成路径
<img src={new URL(`./asset/images/${user.photo}`, import.meta.url).href} alt="photo" />

该方案适合需要享受打包优化能力、无需提前批量导入所有图片的场景。

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