react 引用背景图片及图片问题

刚入手学习react，遇到引用静态文件问题，查了很多资料，整理下；

jxs引用图片的时候网上查大多说的是

import img1 from "@/img/database.png";这种类型；

直接使用<img src={img1 } alt="" />方式；

 

只是项目中改动图片几率是非常大的，每改一次图片就要打包发布是非常麻烦的；所以有了如下方法引用文件的所有图片形成数组；

import testJson from "@/api/database.json";/* 文案 */

const requireContext = require.context("@/images/index", false, (/^\.\/.*?(gif|png|jpg)$/));

const projectImgs = requireContext.keys();

let IMGList = [];

projectImgs.forEach(function (value, index) {

    let varObj = {};

    varObj["pic"] = value.replace("./", "/static/images/");

    varObj["url"] = testJson.more[index];/* banner图链接 */

    IMGList.push(varObj);

});

 

修改图片时一一对应修改即可，如此改动文字或图片无需在修改项目，修改json和文件夹图片即可；

 

 

 

 

 

 

背景图片官网解释很清楚； https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files