Реагировать на импорт изображения из локального хранилища

Question

Как я могу импортировать образ локального хранилища в реакции?

Мои данные выглядят так:

{ image:"newimage.jpeg" }

, и я попытался сделать это:

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

Но это не работает.Любое предложение будет рад.

Answer 1

Вы должны иметь только обратные ссылки `` вокруг пути к файлу:

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

И require - это специфичный для узла IIRC - вам может понадобиться использовать import для проекта React(если только это не React и Node каким-либо образом).

Answer 2

Если вам нужно загрузить локальные изображения, они должны быть в общей папке.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

Answer 3

Просто импортируйте ваше изображение как модуль.

Из документации создания-реакции-приложения (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;