React.js üzerinde doğru yol işareti React.js

Görüntülerimdeki tepki projelerimde bir sorunum var. Nitekim hep src niteliği içine göreli yolu İşte dosyaları mimarisine dosyalarım mimarisiniReact.js üzerinde doğru yol işareti React.js

yapıldığı düşünülmektedir:

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

Ancak yol url üzerine inşa edilmiş olduğunu fark etti.

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

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

nasıl mümkün olabilir bu sorunu çözmek için: (file1.jsx içine örneğin) benim bileşenin birinde bu var? Reaktif yönlendirici tarafından işlenen herhangi bir rotada, tüm görüntülerin aynı yolla gösterilmesini istiyorum.

kaynak

2016-06-05 onedkr

sadece görüntünün üzerine gelin, kullanmayın ../ her neyse – JordanHendrix

Dosya sistemini değil, geçerli URL'ye göre göreceli bir url kullanıyorsunuz. Mutlak URL'ler

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

kullanarak bu sorunu çözmek olabilir Ama bu www.my-domain.bike dağıtmak veya herhangi diğer site zaman için büyük değil. Daha iyi

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

kaynak

2016-06-05 16:48:13 prekolna

Teşekkür ederim, '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' ''' '' '' '' '' '' vurgulayacağım. – user1322092

Reajet uygulamalarında görüntüleri göstermek neden bu kadar zor olduğunu anlamıyorum. Her neyse bu çözüm benim için çalışmıyor. – santafebound

102

soruyu cevaplamak için çalışmıyorum sitesinin kök dizinine bir URL göreli kullanmak olacaktır - in-app oluşturmak tepki sadece bir not, görüntüler için göreli yollar görünmüyor çalışmak. Bunun yerine bir görüntüyü içe aktarabilirsiniz.

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

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

kaynak

2016-10-09 17:24:09 claireablani

, örneğin, bir json dosyasında, referans-tepki-uygulamasında başvurulan dinamik görüntüler? – zok

@zok Değişkeni JSON dosyasından dışa aktarırsanız, değişkeni bileşeninize aktarırsınız. Sonra her zamanki gibi referans gösterebilirsiniz. Örneğin. dışa aktarma const my_src = variable_here, my_file öğesinden {my_src} ve src = {my_src}. – claireablani

'import './styles/style.less'; ** './styles/images/deadline.png' adresinden logoyu içe aktarın; ** 'Resim varken ve yol doğruysa 2. satır modülünde hata alıyorum. – Hitendra

Projenizi oluşturmak için create-react-app'ı kullandıysanız, ortak klasörünüz erişilebilir durumdadır. Bu nedenle, ortak klasörün içinde image klasörünüzü eklemeniz gerekir. aşağıdaki gibi

kaynak

2017-12-30 21:03:36

Bir arkadaşım bunun nasıl yapılacağını bana gösterdi: resim isteyerek dosyası (örneğin 'example.js') içinde aynı seviyede olduğu zaman

"./" işleri klasör görüntüleri "klasör" olarak ağaç yapısı. create-react-app ile

kaynak

2018-03-04 01:49:58 AdamJSim

(... index.html ile) kamu klasör vardır. Eğer orada "myImage.png" koyun ise img alt klasör altında demek, o zaman onları aracılığıyla erişebilirsiniz:

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

kaynak

2018-03-08 10:10:53

Böyle bir şey yapılmalıdır:

<img id = "profile_image" src= { require('../images/' + 
this.state.fileName) } height="100px" width="100px" />

Gereksinim, görüntüleri getirmenize yardımcı olur.

kaynak

2018-03-09 03:47:40

React.js üzerinde doğru yol işareti React.js

cevap

İlgili konular