从本地存储反应导入图像答案

【问题标题】：React import image from local storage从本地存储反应导入图像
【发布时间】：2019-11-20 14:06:32
【问题描述】：

如何在 react 中导入本地存储镜像？

我的数据是这样的；

{ image:"newimage.jpeg" }

我尝试这样做：

<img src={require("../../assets/images/`${data.image}`")}>

但它不起作用。任何建议都会很高兴。

【问题讨论】：

不需要require；只需使用src={`../../assets/images/${data.image}`}

标签： javascript reactjs object ecmascript-6

【解决方案1】：

您只需要在文件路径周围加上反引号 ``：

<img src={require(`../../assets/images/${data.image}`)}>

require 是特定于 Node 的 IIRC - 您可能需要将 import 用于 React 项目（除非它同时是 React 和 Node）。

【讨论】：

【解决方案2】：

只需将图像作为模块导入即可。

来自 create-react-app 文档 (https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files)：

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

【讨论】：

是的，我知道这种方式，但主要问题是我的图像路径来自我的数据
啊，我明白了。在那种情况下，我认为 Jack Bashford 的回答应该可以解决问题。

【解决方案3】：

如果您需要加载本地图像，它应该在公共文件夹中。 https://facebook.github.io/create-react-app/docs/using-the-public-folder#when-to-use-the-public-folder

您还可以导入要使用的图像。 https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files

【讨论】：