Mam problem z moimi obrazami w moim projekcie React. Rzeczywiście, zawsze myślałem, że ścieżka względna do atrybutu src została zbudowana na architekturze plików

Tutaj moja architektura plików:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

Jednak zdałem sobie sprawę, że ścieżka jest zbudowana na adresie URL. W jednym z moich komponentów (na przykład do pliku1.jsx) mam to:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

Jak można rozwiązać ten problem? Chcę, aby w dowolnej formie tras obsługiwanych przez router reagujący wszystkie obrazy mogły być wyświetlane z tą samą ścieżką.

Używasz względnego adresu URL, który jest względny w stosunku do bieżącego adresu URL, a nie systemu plików. Możesz rozwiązać ten problem, używając bezwzględnych adresów URL

<img src ="http://localhost:3000/details/img/myImage.png" />

Ale to nie jest dobre w przypadku wdrażania na www.moja-domena.bike lub w jakiejkolwiek innej witrynie. Lepiej byłoby użyć adresu URL względem katalogu głównego witryny

<img src="/details/img/myImage.png" />

W przypadku create-react-appścieżek względnych obrazy nie działają. Zamiast tego możesz zaimportować obraz:

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

Jeśli utworzyłeś swój projekt za pomocą aplikacji create-react-app, Twój folder publiczny jest dostępny. Musisz więc dodać swój imagefolder do folderu publicznego.

public / images /

<img src="/images/logo.png" />

Ze create-react-appnie ma publicznego folderu (z index.html ...). Jeśli umieścisz tam swój „myImage.png”, powiedz w podfolderze img , możesz uzyskać do nich dostęp przez:

<img src={window.location.origin + '/img/myImage.png'} />

1. Utwórz folder obrazów w src (/ src / images) i zachowaj w nim swój obraz. Następnie zaimportuj ten obraz do swojego komponentu (użyj ścieżki względnej). Jak poniżej

   import imageSrc from './images/image-name.jpg';

   A potem w twoim komponencie.

   <img title="my-img" src={imageSrc} alt="my-img" />

2. Innym sposobem jest przechowywanie obrazów w folderze publicznym i importowanie ich przy użyciu ścieżki względnej. W tym celu utwórz folder obrazu w folderze publicznym i zachowaj w nim swój obraz. A następnie w swoim komponencie użyj go jak poniżej.

   <img title="my-img" src='/images/my-image.jpg' alt="my-img" />

   Obie metody działają, ale pierwsza jest zalecana, ponieważ jest bardziej przejrzysta, a obrazy są obsługiwane przez pakiet sieciowy podczas kompilacji.

Jeśli obraz jest umieszczony w folderze „src”, użyj następującego:

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

Niektóre starsze odpowiedzi nie działają, inne są dobre, ale nie wyjaśniają tematu, podsumowując:

Jeśli obraz znajduje się w katalogu „public”

Przykład: \public\charts\a.png

W html:

<img id="imglogo" src="/charts/logo.svg" />

W JavaScript:

Utwórz obraz do nowego obrazu, dynamicznie:

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';  

Ustaw obraz na istniejący img o identyfikatorze jako „img1”, dynamicznie:

document.getElementById('img1').src = 'charts/a.png';

Jeśli obraz znajduje się w katalogu „src”:

Przykład: \src\logo.svg

W JavaScript:

import logo from './logo.svg';  
img1.src = logo;  

W jsx:

<img src={logo} /> 

Dodanie npm programu ładującego pliki do webpack.config.js zgodnie z jego oficjalną instrukcją użytkowania, taką jak:

config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

pracował dla mnie.

Importuj obrazy w swoim komponencie

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

I wywołaj nazwę obrazu na image src = {RecentProjectImage_3} jako obiekt

 <Img src={RecentProjectImage_3} alt="" />

Znajomy pokazał mi, jak to zrobić w następujący sposób:

„./” działa, gdy plik żądający obrazu (np. „example.js”) znajduje się na tym samym poziomie w strukturze drzewa folderów, co folder „obrazy”.

Umieść logo w swoim folderze publicznym, np. Public / img / logo.png, a następnie odwołaj się do folderu publicznego jako% PUBLIC_URL%:

<img src="%PUBLIC_URL%/img/logo.png"/>

Użycie% PUBLIC_URL% w powyższym zostanie zastąpione adresem URL publicfolderu podczas kompilacji. publicZ kodu HTML można się odwoływać tylko do plików znajdujących się w folderze.

W przeciwieństwie do „/img/logo.png” lub „logo.png”, „% PUBLIC_URL% / img / logo.png” będzie działać poprawnie zarówno z routingiem po stronie klienta, jak iz publicznym adresem URL innym niż główny. Dowiedz się, jak skonfigurować publiczny adres URL inny niż główny, uruchamiając npm run build.