在做一个慕课网的一个项目的时候,里面要使用img的时候需要使用requier进行引入,在react中,这个时候我想把路径作为一个变量,就可以在各处使用了。
但是最后却失败了,才发现requier的机制问题,不能直接使用变量,必须进行强制转换
import React, { Component } from 'react';
import { ImgFigure } from './component/imgFigure.jsx';
import './App.scss';
// 获取画廊数据
const imgData = require('./data/gallery_data.json');
// 图片所在文件夹
const imgDirectory = "./img/gallery_img/";
// 获取图片的Url
const galleryImgs = (function getImgUrl(imgDataArr) {
for (let i = 0, j = imgDataArr.length; i < j; i++) {
var imgUrl = imgDataArr[i];
// imgUrl.imgUrl = require('./img/gallery_img/' + imgDataArr[i].fileName);//可以
// console.log('./img/gallery_img/' + imgDataArr[i].fileName);//失败,报错
imgUrl.imgUrl = require(''+imgDirectory + imgDataArr[i].fileName);//可以
imgDataArr[i] = imgUrl;
}
console.log(imgDataArr);
return imgDataArr;
}(imgData))