suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Korrigieren Sie den Bildpfad in React.js

<p>Ich habe einige Probleme mit Bildern in meinem React-Projekt. Tatsächlich dachte ich immer, dass der relative Pfad im src-Attribut auf der Grundlage des Schemas der Datei erstellt wurde. </p> <p>Das ist meine Dateistruktur: </p> <pre class="brush:php;toolbar:false;">components file1.jsx file2.jsx file3.jsx Container Bild js ...</pre> <p>Mir ist jedoch aufgefallen, dass der Pfad auf der Grundlage der URL erstellt wird. In einer meiner Komponenten (z. B. file1.jsx) habe ich den folgenden Code: </p> <pre class="brush:php;toolbar:false;">localhost/details/2 <img src="../img/myImage.png" /> funktioniert normal localhost/details/2/id <img src="../img/myImage.png" /> funktioniert nicht, das Bild kann nicht angezeigt werden</pre> <p>Wie kann dieses Problem gelöst werden? Ich möchte, dass alle Bilder in jedem vom React-Router verarbeiteten Routing-Formular mit demselben Pfad angezeigt werden. </p>
P粉024986150P粉024986150463 Tage vor617

Antworte allen(2)Ich werde antworten

  • P粉509383150

    P粉5093831502023-08-22 00:48:37

    create-react-app中,似乎无法使用相对路径来引用图片。相反,你可以使用import来引入图片:

    import logo from './logo.png' // 图片的相对路径
    
    class Nav extends Component { 
        render() { 
            return ( 
                <img src={logo} alt={"logo"}/> 
            )  
        }
    }

    Antwort
    0
  • P粉478188786

    P粉4781887862023-08-22 00:46:47

    您正在使用相对URL,它是相对于当前URL而不是文件系统的。您可以通过使用绝对URL来解决此问题

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

    但是,当您部署到www.my-domain.bike或任何其他站点时,这并不理想。更好的方法是使用相对于站点根目录的URL

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

    Antwort
    0
  • StornierenAntwort