踩坑日记：require动态引入资源中的坑

坑之背景

在开发，我们经常会动态引入一些资源，比如下面这样的代码

  const urlPath= '@/assets/webpackhot.jpg'
  const url = require(urlPath)
  return (
    <>
      <img alt="无图片" src={url} />
    </>
  )

我们意图是，urlPath为某种逻辑下的标量，其可以通过不同的逻辑引入不同的资源，但事实上，运行上面的代码，会报下面的错误

Error: Cannot find module '@/assets/webpackhot.jpg'

我使用的是umi3环境，不同的脚手架环境可能报错信息不一样，但一定会报错的，但我们如果不使用变量的话又是没有问题的，说明，我们的资源路径是没有问题的，这样就显得很诡异，其实，关于使用require动态引入静态资源是有一些坑

• 路径不能为全变量
• 标量中不能带有alias（路径别名）

记住这两个坑，我们分别试一下。

  const urlPath= 'assets/webpackhot.jpg'
  const url = require(`@/${urlPath}`)
  console.log(url)
  return (
    <>
      <img alt="污图片" src={url} />
    </>
  )

这样就不会报错了，当然了，同学们也可以下面自己验证一下把别名加在变量中这个坑。
然后我们看一下，使用正确的引入方式引入的资源，其路径结果应该是啥样的

/static/webpackhot.e8f6ba93.jpg

在umi环境下，其正确的结果，应该是编译后的结果，如果你的结果是和你的引入字符串一样的，那八成是出错了~记住这个坑吧！