reactjs - 如何在我的 React 应用程序中引用位于应用程序目录之外的本地图像？

Question

如何从本地目录加载图像并将其包含在 reactjs img src 标签中？我有很多图像文件，它们的路径与 html 块一起存储在数据库中。

我在 react 应用程序目录之外有一个名为 first.jpeg 的图像，我在我的渲染函数中都尝试了，但图像没有显示。

反之，使用 import firstimg from '../common/uploads/first.jpeg' 导入图像并在 img src={firstimg} 中使用它，但我有很多图像文件，它们的路径在数据库中导入，因此，我不能以 img src='image_name.jpeg' 的形式使用它们。

=============================package.json==================================
{
    "name": "test",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.12.0",
        "@testing-library/react": "^11.2.7",
        "@testing-library/user-event": "^12.8.3",
        "bootstrap": "^4.6.0",
        "faker": "^5.5.3",
        "node-sass": "^4.14.1",
        "react": "^17.0.2",
        "react-bootstrap": "^1.6.1",
        "react-dom": "^17.0.2",
        "react-icons": "^4.2.0",
        "react-router-dom": "^5.2.0",
        "react-scripts": "^4.0.3",
        "styled-components": "^5.3.0",
        "web-vitals": "^1.1.2",
        "yup": "^0.32.9"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
}

标签： reactjs