React Router，保护静态图片答案

【问题标题】：React Router , protect static imagesReact Router，保护静态图片
【发布时间】：2019-04-15 11:49:55
【问题描述】：

我使用 react 创建了一个网站。可以使用以下网址访问网页的图像 - http://localhost:3000/1.jpg

我想保护而不是在公共文件夹中显示该图像，我试过下面的代码，如果我在 url 中给出图像名称点扩展名，它不起作用，如果公共文件夹中不存在该名称图像，它会起作用

import React, { Component } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import App from "../App";
import PageNotFound from "../components/PageNotFound/PageNotFound";

class Router extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={App} />
          <Route path="*" component={PageNotFound} />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default Router;

【问题讨论】：

你能详细说明一下吗？您不希望用户看到您的public 目录中的图像吗？他们应该如何看待这些图像？如果他们根本不应该看到它们，为什么它们会在您的public 目录中
我不希望用户看到公共目录中的图像，图像可以通过 url 访问，我想避免这种情况。
也许我没有关注，但是如果您不希望它们访问，用户的浏览器应该如何下载图像？
是的，你是对的，我认为有一些方法不允许用户使用 url 看到该图像。
您可以使用.htaccess 防止直接访问公共文件夹中的图像

标签： javascript reactjs react-router

【解决方案1】：

建议将图像放入文件夹public/images（通常按照惯例）然后做这样的事情

import React, { Component } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import App from "../App";
import PageNotFound from "../components/PageNotFound/PageNotFound";

class Router extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={App} />
          <Route path="*" component={PageNotFound} />
          <Route path="/images/public/*" component={PageNotFound} />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default Router;

【讨论】：