React关于img动态传递src的问题

起因

最近在仿写掘金网站中，遇到了关于图片标签img的src传递问题，因为我是用webpack+react进行开发的，在对下面进行组件开发时，想要使用动态传参的方式进行实现。但却因为在img标签中的src属性中只能编写绝对路径或者用import和require请求图片才能生效。

绝对路径固然不是我想要的，所以我先对import开始下手，查阅网站其他大神的文章后，我进行了尝试，发现import图片需要手动配置路径，并不能实现我的要求。

import方式

import方式,这种方式需要自己导入导出，无法实现动态设置

tsx 复制代码

import image from "图片路径"

require方式

于是我从requie方式下手，也是在网上进行查阅后发现，require请求方式为

tsx 复制代码

const img = require("./xxxx/xxx/xxx.jpg")
\\这种方式无法传入变量

或者

tsx 复制代码

\\上面require的方法也是写死的，无法实现要求
\\假设传递过来的参数为 maxfly.jpg
\\假设静态文件路径为 src/assets/images/maxfly.jpg

\\对于传递过来的参数path = maxfly.jpg

\\第二种require方式,这种方式可以传递变量
\\require的参数分为三段，第一段和第三段写死，第二段可以传输string变量
\\对于第一段参数写死，我们得从当前文件路径 通过 ../或./等 组合定位到images文件
\\第二段参数则为图片的name(不包括后缀) 
\\第三段参数则为图片的后缀
\\则代码应为
path = maxfly.jpg
const img = require("../../.assets/images",path.split('.')[0],".jpg")

通过上面的require第二个方法可以基本满足我们的要求。

但写到后面这种要求变得麻烦起来，因为我们不能保证传递过来的参数的后缀都是.jpg类型的，想象一下，如果图片来源不仅有.jpg还有.png,.jpeg,.webg,.gif等图片格式呢,如此一来我们还得对传递过来的参数进行判断，毕竟require方法的第三个参数只能写死，不能传递变量，且如果我在多个组件里面都有这种img动态传参的需求，是不是就代表着我们都要再写一遍这个图片格式处理，第一段路径的定位，这将会非常繁杂和麻烦无比。

偷懒方法

所以为了省时省力，为了在不同路径的组件都可以使用到这种方式，避免重复多次同一个工作，我对require图片获取进行了一次封装，多说无用，看代码。

tsx 复制代码

\\传递过来的参数依旧为maxfly.jpg 这种名字.后缀的格式 
\\这种方式用到了别名的运用，我这里用的是webpack和typescript的别名设置
const imgSolve = (imgPath: string) => { 
  const imgPathsArr = imgPath.split(".");

  switch (imgPathsArr[1]) {
    case "jpg":
      return require("@/assets/images/" + imgPathsArr[0] + ".jpg");
    case "png":
      return require("@/assets/images/" + imgPathsArr[0] + ".png");
    case "gif":
      return require("@/assets/images/" + imgPathsArr[0] + ".gif");
    case "svg":
      return require("@/assets/images/" + imgPathsArr[0] + ".svg");
    case "webp":
      return require("@/assets/images/" + imgPathsArr[0] + ".webp");
    case "jpeg":
      return require("@/assets/images/" + imgPathsArr[0] + ".jpeg");
    default:
      console.log("file type not found");
      break;
  }
};

export default imgSolve; // 导出函数

看看使用效果

可以看到这种方式是可行的，大成功！

最后

由于我在网上查阅的时候实在是找不到几篇关于react img动态传参的问题，写下这篇文章也是为了帮助在img动态传参上出现问题的小伙伴一点帮助，最后的最后，这是我的第一次发文，帮到你的话能给我点个赞吗。😀