解析 img src 和 background-image url 时使用字符串路径而不是要求答案

【问题标题】：Use string paths to images instead of requires when resolving img src and background-image urls解析 img src 和 background-image url 时使用字符串路径而不是要求
【发布时间】：2019-11-14 18:01:45
【问题描述】：

我已经通过文件加载器使用 webpack 加载图像，但前提是我需要或导入图像。我想知道create-react-app 是如何实现它们的功能的，其中放置在public 文件夹中的所有内容都可以访问，即<img src="/images/myLogo.jpg" /> 在public/images/myLogo.jpg 存在的情况下有效。

我的项目结构如下

src/
  assets/
   images/
   fonts/
  components/
  index.js
  index.html
webpack.config.js
package.json

是否有可能做到这一点，尽管我在我的 js 文件中，我可以使用 <img src="/assets/images..." 和 background-image: url(/assets/images/...) 来解析我的资产文件夹中的文件？或者至少类似的东西不需要我导入这些资产文件？

【问题讨论】：

你可以通过eject来检查create-react-app里面的webpack是如何配置的。
我实际上在他们的 github 存储库中找到了该文件，但由于我不确定要查找什么，因此无法完全遵循逻辑。最初我认为它与publicPath 有关，但进一步阅读 cinfig 他们似乎在做更多的事情，并且根据产品或开发环境而有所不同
因为它被打包（在 create-react-app 内），所以必须有很多东西必须为每个人开箱即用，而不会弹出。所以最好弹出来看看。

标签： javascript reactjs webpack create-react-app

【解决方案1】：

你可以在 webpack 中使用别名：

https://webpack.js.org/configuration/resolve/

module.exports = {
  //...
  resolve: {
    alias: {
      Assets: path.resolve(__dirname, 'src/assets/'),
      Images: path.resolve(__dirname, 'src/assets/images')
    }
  }
};

然后在你的代码中你可以像这样访问：

import myimpage from 'Assets/images/myimage.png'
import another from 'Images/another.png'

或者图片：

<img src={require('Images/another.png')} />

【讨论】：

这仍然使用 require / import 模式而不是字符串？