Tôi có một số vấn đề với hình ảnh của tôi trong dự án phản ứng của tôi. Quả thực tôi luôn nghĩ rằng đường dẫn tương đối vào thuộc tính src được xây dựng trên kiến ​​trúc tệp

Đây là kiến ​​trúc tập tin của tôi:

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

Tuy nhiên tôi nhận ra rằng đường dẫn được xây dựng trên url. Trong một trong các thành phần của tôi (ví dụ vào file1.jsx) tôi có điều này:

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

Làm thế nào có thể giải quyết vấn đề này? Tôi muốn rằng trong bất kỳ dạng tuyến đường nào được xử lý bởi bộ định tuyến phản ứng, tất cả các hình ảnh có thể được hiển thị với cùng một đường dẫn.

Bạn đang sử dụng một url tương đối, liên quan đến url hiện tại, không phải hệ thống tệp. Bạn có thể giải quyết điều này bằng cách sử dụng các url tuyệt đối

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

Nhưng điều đó không tuyệt vời khi bạn triển khai lên www.my-domain.bike hoặc bất kỳ trang web nào khác. Tốt hơn là sử dụng một url liên quan đến thư mục gốc của trang web

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

Trong create-react-appcác đường dẫn tương đối cho hình ảnh dường như không hoạt động. Thay vào đó, bạn có thể nhập một hình ảnh:

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

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

Nếu bạn đã sử dụng ứng dụng tạo phản ứng để tạo dự án thì thư mục chung của bạn có thể truy cập được. Vì vậy, bạn cần thêm imagethư mục của bạn bên trong thư mục công cộng.

công khai / hình ảnh /

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

Với create-react-appcó công thư mục (với index.html ...). Nếu bạn đặt "myImage.png" của mình ở đó, hãy nói trong thư mục con img , sau đó bạn có thể truy cập chúng thông qua:

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

1. Tạo một thư mục hình ảnh bên trong src (/ src / hình ảnh) Và giữ hình ảnh của bạn trong đó. Sau đó nhập hình ảnh này trong thành phần của bạn (sử dụng đường dẫn tương đối của bạn). Giống như bên dưới-

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

   Và sau đó trong thành phần của bạn.

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

2. Một cách khác là giữ hình ảnh trong thư mục công cộng và nhập chúng bằng đường dẫn tương đối. Để làm điều này, hãy tạo một thư mục hình ảnh trong thư mục công cộng và giữ hình ảnh của bạn trong đó. Và sau đó trong thành phần của bạn sử dụng nó như dưới đây.

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

   Cả hai phương pháp đều hoạt động nhưng cách thứ nhất được khuyến nghị vì cách sạch hơn và hình ảnh được xử lý bởi webpack trong thời gian xây dựng.

trong trường hợp của tôi sau đây mã làm việc quá.

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

Một số câu trả lời cũ hơn không hoạt động, những câu trả lời khác là tốt nhưng sẽ không giải thích chủ đề, tóm lại:

Nếu hình ảnh nằm trong thư mục 'công khai'

Thí dụ: \public\charts\a.png

Trong html:

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

Trong JavaScript:

Tạo hình ảnh sang img mới, động:

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

Đặt hình ảnh thành img hiện có với id là 'img1', tự động:

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

Nếu hình ảnh nằm trong thư mục 'src':

Thí dụ: \src\logo.svg

Trong JavaScript:

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

Trong jsx:

<img src={logo} /> 

Thêm npm trình tải tệp vào webpack.config.js theo hướng dẫn sử dụng chính thức của nó như sau:

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

đã làm cho tôi.

Nhập hình ảnh trong thành phần của bạn

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

Và gọi tên hình ảnh trên hình ảnh src = {RecentProjectImage_3} làm đối tượng

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

Một người bạn đã chỉ cho tôi cách làm điều này như sau:

"./" hoạt động khi tệp yêu cầu hình ảnh (ví dụ: "example.js") ở cùng cấp trong cấu trúc cây thư mục với thư mục "hình ảnh".

Đặt logo trong thư mục công cộng của bạn dưới ví dụ: public / img / logo.png và sau đó tham khảo thư mục công khai dưới dạng% PUBLIC_URL%:

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

Việc sử dụng% PUBLIC_URL% ở trên sẽ được thay thế bằng URL của publicthư mục trong quá trình xây dựng. Chỉ các tệp bên trongpublic thư mục có thể được tham chiếu từ HTML.

Không giống như "/img/logo.png" hoặc "logo.png", "% PUBLIC_URL% / img / logo.png" sẽ hoạt động chính xác cả với định tuyến phía máy khách và URL công cộng không root. Tìm hiểu cách định cấu hình URL công cộng không root bằng cách chạy npm run build.