在components目录的myPage.js中如何引用assets下的sampleposition.png

你之前直接写src="../assets/sampleposition.png"不生效的原因是，js/jsx 中的字符串形式路径不会被构建工具自动解析为静态资源的实际打包路径，可按照以下方案处理：

• 方案1：导入后引用（适用于React、Vue、Vite、Webpack等绝大多数构建场景，最通用）
  首先在myPage.js文件顶部导入图片资源：

  import samplePositionImg from '../assets/sampleposition.png'
  

  然后在img标签中直接使用导入的变量：

  <img src={samplePositionImg} alt="自定义描述文本" />
  

  构建工具会自动完成路径解析、资源哈希、打包路径适配，不会出现路径错误问题。
• 方案2：public目录静态引用
  如果你不想通过导入的方式使用，可将图片移动到项目根目录的public/assets/sampleposition.png路径下，直接写绝对路径即可：

  <img src="/assets/sampleposition.png" alt="自定义描述文本" />
  

  注意这种方式的图片不会经过构建工具处理，不会添加哈希后缀，更新后可能出现客户端缓存问题。
• 方案3：require 动态引入（适配老版本Webpack/React脚手架）
  不需要在顶部导入，直接在src属性中使用require引入：

  <img src={require('../assets/sampleposition.png').default} alt="自定义描述文本" />
  

  部分构建环境不需要加.default，如果引入失败可尝试去掉该后缀。

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