Как сделать динамические изображения в ReactJS? - PullRequest
Новая
       40

Как сделать динамические изображения в ReactJS?

0 голосов
/ 22 января 2019

В моей системе у меня есть несколько изображений, которые пользователь может представить, и для меня чрезвычайно выгодно иметь возможность просто передать идентификатор и затем предоставить это изображение пользователю.

(Один вариант использования: статьи в системе имеют изображения, связанные с ними, в системе много статей, было бы идеально вытащить только идентификатор изображения и динамически отобразить изображение на основе этого идентификатора. Нет реалистичного способа, которым я мог бы статически указать путь к изображению для каждой статьи.)

К сожалению, я пытался это выяснить и совсем не продвинулся. Я был бы очень благодарен за ответ «Объясни мне, что мне 5 лет».

Я пытался использовать изображения двумя разными способами, и оба , к сожалению, у меня вообще не сработали. Где, к сожалению, мне нужно и то и другое, чтобы продолжить: (

1: положить его в качестве фона div. [Я использую это как карусель с наложением текста здесь.]

2: это просто изображение. [Это составляет более 95% случаев использования изображений через веб-приложение.]

Я бы хотел, чтобы в идеальном мире просто передавался такой предмет реквизиту. 

  articleDetails = {
        articleId: 38387,
        articleTitle: "Magical Unicorn Article"
        articleContent: "I am not that creative, but here is some content."
    }


       <IndividualArticle article={articleDetails}/>

Тогда для реквизита, чтобы принять это и преобразовать его в путь изображения к моим локальным файлам. 

   templateStringForImage = `../../../../articleImages/${this.props.article.articleId}.png`

Тогда для этой строки шаблона будет использоваться:

1: фоновое изображение div 

    <div
         className="container"
         style={{
             backgroundImage: `url(${templateStringForImage})`         ,                       
             height: "576px"          
    }} 
enter code here

 </div>

2: автономное изображение 

      <Image
            src={require({templateStringForImage})}
      />

Некоторые вещи, которые я пробовал:

Я пробовал несколько изменений, таких как изменение кода: 

     var Background = `../../../images/articleImages/${         
              this.props.article.image     
     }`;

1036 * 

     <div style={{                
             backgroundImage: url('../../../images/articleImages/article3Image.png'),                                
              height: "576px"          
     }}

Но, к сожалению, это дало мне только эти ошибки. 

 Line 32:  'url' is not defined  no-undef

Также, когда я попытался использовать новый объект Background, я получил другую ошибку 

             var Background = `../../../images/articleImages/${         
                   this.props.article.image     
            }`; 

          <Image
               src={require({Background})}
          />

Ошибка была: 

         Error: Cannot find module '[object Object]'

Моя текущая система / ошибки:

-У меня есть куча изображений, таких как article1Image.png, article2Image.png, article3Image.png, указанных в коде src в папке изображений.

-Я хочу передать «article1Image.png» непосредственно в объект и получить изображение.

-Я пытался сделать что-то подобное, и это постоянно терпело неудачу, я даже не получаю сообщение об ошибке, когда пытаюсь использовать его как backgroundImage на div, к сожалению ... это буквально пустое место на моем экране , Значок не отображается, просто пустота. 

   var Background = `'../../../images/articleImages/${
         this.props.article.image
    }'`;

    <div
    style={{
      backgroundImage: `url(${Background})`,
      height: "576px"
    }}

-При попытке использовать образ semantic-ui я также сталкиваюсь с неприятной ошибкой 

      <Image
        src={require(Background)}
      />

Ошибка: 

 Error: Cannot find module ''../../../images/articleImages/article2Image.png''

И все же, достаточно шокирующе, ЭТО работает, когда я представляю его в виде статической строки, подобной этой. 

      <Image
        src={require('../../../images/articleImages/article2Image.png')}
      />

Но даже когда я даю строковый путь прямо в backgroundImage div, он все равно кажется пустым ... 

      <div
           style={{
               backgroundImage: `url(../../../images/articleImages/article3Image.png)`,
               height: "576px"
         }}

Спасибо всем, что я действительно ценю помощь много и много!

1 Ответ

0 голосов
/ 22 января 2019

Существует 2 различных решения, основанных на том, что вы пробовали.

URL

Если вы хотите получить к ним доступ через style={{ backgroundImage: 'url(...)' }}, URL-адрес должен быть доступен с передней панели.конец.Если вы использовали create-реакции-приложение, это означало бы размещение изображений в папке public вместо папки src.

Так что если у вас есть изображения в общей папке, такие как: /public/articleImages/article2Image.png, выможет использовать атрибут стиля url: 

const imageName = 'article2Image.png';
<div style={{ backgroundImage: `url('/articleImages/${imageName}')` }}>
  ...
</div>
<img src={`/articleImages/${imageName}`} />

Если вы не используете конфигурацию create-реагировать-приложение, вам нужно будет сделать доступными изображения, как бы вы ни обслуживали ваше приложение (то есть express).

Требуется

Это немного сложно, и я не на 100%, почему он не работает из коробки.

Что яПри тестировании это должно было потребовать, чтобы все мои изображения в верхней части файла были жестко запрограммированы, и тогда я смог использовать require(stringTemplate) очень хорошо.Но я получил Error: fileName hasn't been transpiled yet., так что я не уверен, будет ли работать то же самое исправление для вас.

В основном это выглядит так: 

require('../../../images/articleImages/article1Image.png');
require('../../../images/articleImages/article2Image.png');
... 
// This code would be inside a component
const imageName = 'article2Image.png';
const filePath = '../../../images/articleImages/${imageName}';
const fileUrl = require(filePath);
<div style={{ backgroundImage: `url(${fileUrl})` }}>
  ...
</div>
<img src={fileUrl} />

Без обязательных (s)) в верхней части файла что-то идет не так с транспиляцией.

Я бы предложил пойти по пути статических ресурсов, который позволил бы вам использовать вышеописанную технику URL.require больше подходит для статических файлов, которые не часто меняются, например значки.

Не стесняйтесь задавать любые вопросы, и я с удовольствием уточню и приведу больше примеров.

...