Правильный путь для img на React.js

У меня есть некоторые проблемы с моими изображениями в моем проекте реагирования. Действительно, я всегда считал, что относительный путь в атрибуте SRC был построен на архитектуре файловПравильный путь для img на React.js

Вот мои файлы архитектуры:

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

Однако я понял, что путь был построен на ссылке. В одном из моих компонентов (например, в file1.jsx) У меня есть это:

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

Как можно решить эту проблему? Я хочу, чтобы в любой форме маршрутов, обрабатываемых реактивным маршрутизатором, все изображения могут отображаться с одним и тем же путем.

источник

2016-06-05 onedkr

просто указывайте непосредственно на картинку, не используйте ../ whatever – JordanHendrix

Вам нужно использовать 'require'. Прочтите это [ответ] (https://stackoverflow.com/a/34583854/2099607) на SO для получения дополнительной информации. – today

Вы используете относительный URL-адрес, который относится к текущему URL-адресу, а не к файловой системе. Вы могли бы решить эту проблему, используя абсолютные URL'ы

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

Но это не очень удобно, если вы развернуть в www.my-domain.bike или любой другой сайт. Лучше было бы использовать URL-адрес относительно корневой директории сайта

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

источник

2016-06-05 16:48:13 prekolna

Спасибо, я хотел бы подчеркнуть '/', который предшествует 'details' (vs'./Details' и т. Д. Для других, которые могут скрыть их). – user1322092

Я не понимаю, почему так сложно показывать изображения в приложениях reactjs. Во всяком случае, это решение не работает для меня. – santafebound

Даже для меня это не работает. Я использую 'reactjs' с' cordova' и используя 'ES5' как eslint –

102

не пытается ответить на вопрос - только к сведению, что в создании реагирующего-приложение, кажется, не относительные пути для изображений работать. Вместо этого вы можете импортировать изображение.

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

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

источник

2016-10-09 17:24:09 claireablani

, что о динамических изображениях, например, упоминаемых в json-файле, в приложении create-response-app? – zok

@zok Я думаю, что вы экспортируете переменную из файла JSON, импортируете переменную в свой компонент. Тогда вы можете ссылаться на него, как обычно. например export const my_src = variable_here, import {my_src} из my_file и src = {my_src}. – claireablani

'import './styles/style.less'; ** import logo from './styles/images/deadline.png'; ** 'Я получаю сообщение об ошибке на модуле 2-й линии, который не найден, пока изображение существует, и путь правильный. – Hitendra

Если вы создали приложение create-react-app для создания своего проекта, тогда доступна ваша общая папка. Поэтому вам нужно добавить папку image в общую папку.

источник

2017-12-30 21:03:36

Друг показал мне, как сделать это следующим образом:

«./» работает, когда файл запроса изображения (например, „example.js“) находится на том же уровне, в пределах структуру дерева папок как папку «изображения».

источник

2018-03-04 01:49:58 AdamJSim

С create-react-app есть общественного папки (с index.html ...). Если вы поместите «myImage.png» там, скажем, под IMG подпапки, то вы можете получить доступ к ним через:

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

источник

2018-03-08 10:10:53

Это должно быть сделано что-то вроде этого:

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

Требование позволяет вам получать изображения.

источник

2018-03-09 03:47:40

Правильный путь для img на React.js

ответ

Смежные вопросы