Реагирует на добавление изображения в аккордеоне

ProgramBox

Реагирует на добавление изображения в аккордеоне

Post author:admin
Запись опубликована:5 августа, 2022
Post category:Вопросы по программированию

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

Я пытаюсь создать страницу часто задаваемых вопросов, и у меня есть следующие три файла:

App.js

 import React, { useState } from 'react';
import Header from './Header';
import FAQ from './FAQ';

function App () {
  const [faqs, setfaqs] = useState([
    {
      id: 1,
      question: 'This is question 1?',
      answer: 'This is answer 1',
      open: false
    },
    {
      id: 2,
      question: 'This is question 2?',
      answer: 'This is answer 2',
      open: false
    },
    {
      id: 3,
      question: 'This is question 3?',
      answer: 'This is answer 3',
      image: 'Question3.png',
      open: false
    },
    {
      id: 4,
      question: 'This is question 4?',
      answer: 'This is answer 4',
      open: false
    }
  ]);

  const toggleFAQ = index => {
    setfaqs(faqs.map((faq, i) => {
      if (i === index) {
        faq.open = !faq.open
      } else {
        faq.open = false;
      }

      return faq;
    }))
  }


  return (
    <div className="App">
      <Header />
      <div className="faqs">
        {faqs.map((faq, i) => (
          <FAQ faq={faq} index={i} key={faq.id} toggleFAQ={toggleFAQ} />
        ))}
      </div>
    </div>
  );
}

export default App;

FAQ.js

 import React from 'react'
function FAQ ({faq, index, toggleFAQ}) {

    // console.log(faq.hasOwnProperty('url'));

     if(faq.hasOwnProperty('url') amp;amp; faq.hasOwnProperty('image')){
         console.log("Hello URL");
         return (
            <div
                className={"faq "   (faq.open ? 'open' : '')}
                key={faq.id}
                onClick={() => toggleFAQ(index)}
            >
                <div>
                    <div className="faq-question">
                        {faq.question}
                    </div>
                    <div className="faq-answer">
                        {faq.answer}
                        <div className="faq-url">
                            <a href={faq.url}>Link to URL</a>
                        </div>
                        <div className="faq-image">
                            <img src={`/src/media/${faq.image}`} alt="Image for FAQ"/>
                        </div>
                    </div>

                </div>
            </div>
         )
     }
     else {
        console.log("No url");
        return (
            <div
                className={"faq "   (faq.open ? 'open' : '')}
                key={faq.id}
                onClick={() => toggleFAQ(index)}
            >
                <div>
                    <div className="faq-question">
                        {faq.question}
                    </div>
                    <div className="faq-answer">
                        {faq.answer}
                    </div>
                </div>
            </div>
         )
     }
    }

export default FAQ;

Index.css

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: rgb(255, 255, 255);
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

header {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 5px;
    background-color:#4caf50;
    border-bottom: 3px solid #3c3c3c;
}

header h1 {
    color: rgb(26, 25, 25);
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
}

.faqs {
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    padding: 15px;
}

.faqs .faq {
    margin: 20px;
    padding: 15px;
    background-color:#f5f5f5 ;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.faqs .faq:hover {
    background-color: #f0ebeb;
}

.faqs .faq .faq-question {
    position: relative;
    font-size: 20px;
    padding-right: 80px;

    transition: all 0.4s ease;
}

.faqs .faq .faq-question::after {
    content: '2B9B';
    position: absolute;
    color: black;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    margin-top: 10px;
    width: 50px;
    height: 50px;

    transition: all 0.4s ease-out;
}

.faqs .faq .faq-answer {
    opacity: 0;
    max-height: 0;
    overflow-y: hidden;
    transition: all 0.4s ease-out;
}

.faqs .faq.open .faq-question {
    margin-bottom: 15px;
}

.faqs .faq.open .faq-question::after {
    /* transform: translateY(-70%) rotate(180deg); */
    content: "2B99";
}

.faqs .faq.open .faq-answer {
    max-height: 1000px;
    opacity: 1;
}

Структура каталогов всех страниц выглядит следующим образом:

App.js состоит из состояния объектов, содержащих различные вопросы и ответы для страницы часто задаваемых вопросов. Также он состоит из FAQToggle, который проверяет, открыт ли аккордеон или нет, и закрывает аккордеон, если он открыт, и наоборот.

FAQ.js Строка: 24 (актуальная проблема, с которой я сталкиваюсь): я пытаюсь добавить изображение, чтобы ответ 3 мог содержать изображение. Но все, что я вижу, это сломанный значок изображения. Кто-нибудь может помочь мне в отладке этого?

1. Я думаю, вам может потребоваться импортировать изображение в файл js и использовать его в качестве переменной. Поместите имя изображения в свой массив состояний и укажите на него свой тег img src.

Ответ №1:

Я думаю, что вы можете использовать фотографии в своих компонентах только в том случае, если вы импортируете, тогда сначала дайте мне знать, если я ошибаюсь. https://create-react-app.dev/docs/adding-images-fonts-and-files /

В этом сообщении говорится, что вам «нужно» сначала импортировать их: https://www.edwardbeazer.com/importing-images-with-react /

Вот еще один: https://daveceddia.com/react-image-tag /

Цитата — «Распространенной ошибкой для начинающих является установка src в путь к файлу на своем компьютере, например /Users/yourname/Projects/this-react-app/src/image.png . Это не сработает «.

Цитата — «В наши дни браузеры в основном изолированы и не позволяют вам получать доступ к файлам по их пути на диске. Если бы вы заставили это работать (возможно, с file:// ), это сломалось бы, как только вы развернули приложение, потому что на веб-сервере не будет этого файла в том же месте! (И нет, решение не в том, чтобы поместить его в одно и то же место на сервере »

 import React, { useState } from 'react';
import Header from './Header';
import FAQ from './FAQ';
import Question3 from "./media/Question3.png" //import img here

function App () {
  const [faqs, setfaqs] = useState([
    {
      id: 1,
      question: 'This is question 1?',
      answer: 'This is answer 1',
      open: false
    },
    {
      id: 2,
      question: 'This is question 2?',
      answer: 'This is answer 2',
      open: false
    },
    {
      id: 3,
      question: 'This is question 3?',
      answer: 'This is answer 3',
      image: Question3, // use it as a variable
      open: false
    },
    {
      id: 4,
      question: 'This is question 4?',
      answer: 'This is answer 4',
      open: false
    }
  ]);

  const toggleFAQ = index => {
    setfaqs(faqs.map((faq, i) => {
      if (i === index) {
        faq.open = !faq.open
      } else {
        faq.open = false;
      }

      return faq;
    }))
  }


  return (
    <div className="App">
      <Header />
      <div className="faqs">
        {faqs.map((faq, i) => (
          <FAQ faq={faq} index={i} key={faq.id} toggleFAQ={toggleFAQ} />
        ))}
      </div>
    </div>
  );
}

export default App;

Развернуть фрагмент

      if(faq.hasOwnProperty('url') amp;amp; faq.hasOwnProperty('image')){
         console.log("Hello URL");
         return (
            <div
                className={"faq "   (faq.open ? 'open' : '')}
                key={faq.id}
                onClick={() => toggleFAQ(index)}
            >
                <div>
                    <div className="faq-question">
                        {faq.question}
                    </div>
                    <div className="faq-answer">
                        {faq.answer}
                        <div className="faq-url">
                            <a href={faq.url}>Link to URL</a>
                        </div>
                        <div className="faq-image">
                            <img src={faq.image} alt="Image for FAQ"/> //target it here
                        </div>
                    </div>

                </div>
            </div>

Развернуть фрагмент

1. Я попытался импортировать изображение в FAQ.js файл, но у меня это не совсем сработало. Но решение, которое вы предоставили, решило мою проблему, с которой я столкнулся.. Большое спасибо, это сработало как шарм … 🙂

Метки: Реагирует на добавление изображения в аккордеоне