React 组件引用本地图片问题

╰+攻爆jí腚メ 2021-09-15 22:34 421阅读 0赞

es6不支持在<img />标签内直接写图片的路径，即：  
<img src="../images/photo.png"/>  
这种格式是不支持的。在网上看了很多博客，总结下以下几个加载的方法，当然，这种是在图片不多的情况下可以采用。

**一.少量图片的时候，单张引入**  
**（1）import 方法**：

import logos from '../../assets/images/logos.png';//src/assets
    render() {
    		return (
    			<img alt="logo" src={logos} />
    		)
    	}

**（2）require方法**

这种方法需要注意的是，require里只能写字符串，不能写变量。  
这两种办法可以解决图片不多，在前端直接加载图片路径的问题。那么，假设需要从数据库中读取图片的路径，require不能写变量，import from后面也不能写变量，那么该怎么办呢，现在也假设两种情况。

**二.多图片的时候**

**（1）图片了不大的情况 且知道图片顺序的情况下**  
    json:

[
      {
        "name":'img1'
        "img":"img1",
        "url":""
      },
      {
        "name":"img2",
        "img":"img2",
        "url":""
      },
      {
        "name":"img3",
        "img":"img3",
        "url":""
      }
    ]

react:

import img1 from'./../images/img1.png';
    import img2 from'./../images/img2.png';
    import img3 from'./../images/img3.png';
     
    const imgsArr = [img1,img2,img3];
     
    render(){
        return(
            <div>
                {
                    imgsArr.map(function(name){
                        return(
                            <img src={name} />
                        )
                    }) 
                }
            </div>
        )
    }

这个只能满足图片量不大，且知道图片加载顺序的情况下。  
（2）图片量很大，且图片顺序需与json文件的name一致  
    这种情况下，看了网站上一个博客，可以同时import 一个文件夹下面的图片路径放到一个数组arrIMGURL里，就想到了一个方法，假设全部加载到图片里，在后台json文件的"img"属性里写该图片的名字a，在渲染的时候，遍历存放图片路径数组，假设arrIMGURL包含a,则渲染该图片。代码如下：  
    1、全部加载图片路径

const requireContext = require.context("./../img/project",true, /^\.\/.*\.png$/);
    const projectImgs = requireContext.keys().map(requireContext);

2、渲染

createContent(){
            var _this = this;
            for (var i = 0;i<this.dataSource.length;i++){
                var columns = [];
                var imgURL;
                for (var j = 0; j < projectImgs.length;j++){
                    if(projectImgs[j].indexOf(_this.dataSource[i].img) > 0){
                        imgURL = projectImgs[j];
                    }
                }
                columns.push(<div className="projectImg"><img src={imgURL} alt=""/></div>);
                columns.push(<a href={_this.dataSource[i].url}>{_this.dataSource[i].name}</a>);
                result.push(<div className="projectContent">{columns}</div>);
     
            }
            return result;
        };