Изображение не отображается с реквизитами в ReactJS
У меня есть локальное изображение, и я хочу разместить его на своей веб-странице с Реквизит. Я сделал src = {require('../images/my-image.png')}, но это не сработало.
Он работает только с импортом файла изображения, но я хочу, чтобы он был динамическим.
Результирующий элемент img выглядит следующим образом:
App.js:
export default function App() {
return (
<div className = "App">
<Cards img = "my-image.png" />
</div>
)
}
Карты.js:
export default function Card(props) {
return (
<div>
<img src = {`../images/${props.img}`} />
</div>
)
}
В общем, я не могу поместить файл изображения в атрибут src в JSX, даже что-то вроде этого:
<img src = "../images/my-image.png" />
Импортируйте изображения в App.js и передайте их в качестве реквизита в Cards.js.
@ Дэвид, я почти уверен, что расположение файла, который я передал в src, верное. для полученного элемента img проверьте сообщение еще раз, я его отредактировал
@AbinThaha Но количество фотографий велико
@saleh: Быть «почти уверенным» - хорошее начало, но на самом деле отладка и наблюдение будут гораздо полезнее. Используйте инструменты отладки вашего браузера, чтобы наблюдать за фактическими результатами. Какой точный HTML для этого <img>? Во вкладке сети средств отладки делается запрос на файл образа? Какой ответ сервера? Не предполагайте, отлаживайте и наблюдайте.
@David, я проверил это в Dev Tools. src элемента img совпадает с моим местоположением изображения
Вы должны переместить свои активы в общую папку, а не хранить их в папке src. Кроме того, вы можете использовать CDN для изображений, если они доступны. Пожалуйста, перейдите по этой ссылке: stackoverflow.com/questions/58553309/… . Ссылка на мой рабочий код: codeandbox.io/s/ревностный-borg-usgyqv
@shalinimandal Я сделал это, но выдает эту ошибку: Module not found: You attempted to import ../../public/images/airbnb-logo.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Пожалуйста, проверьте ссылку codeandbox в моем комментарии. Вам не нужно импортировать изображение. Используйте его так: <img width = "100" src = {/images/${props.img}} alt = "sample" />
@saleh, можно использовать функциональный подход для импорта всех (используя importAll) изображений.
@shalinimandal большое спасибо, все сработало!! если хотите, опубликуйте его как ответ, чтобы принять ваш ответ.
@saleh: И каков ответ сервера на запрос этого изображения? Вы продолжаете настаивать на том, что все правильно, вместо того, чтобы наблюдать за фактическими результатами. Ваш код наглядно работает как есть, при условии, что изображение действительно доступно там, где вы предполагаете.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
привет, если вы хотите сделать URL-адрес изображения динамическим, вы можете написать его так:
<img src = {require(`../images/${image}`)} alt = "product" />
ссылка : Загружать изображения на основе динамического пути в ReactJs
Это не работает :[ В Dev Tools элемент src элемента img стал [object Module]
Можете ли вы проверить работу importAll для вас? Проверьте ссылку ниже и подтвердите, работает ли это для вас.
Динамически импортировать изображения из каталога с помощью веб-пакета
В конце importAll у вас будет массив всех изображений, и в зависимости от ваших требований вы можете передать указанное изображение в качестве реквизита в Cards.js.
Вы должны переместить свои активы в общую папку, а не хранить их в папке src. Кроме того, вы можете использовать CDN для изображений, если они доступны.
Пожалуйста, перейдите по этой ссылке: Реагировать, загружать изображения локально из json
Ссылка на мой рабочий код: https://codesandbox.io/s/ревностный-borg-usgyqv
Это очень просто, если у вас есть «png», все, что вам нужно сделать, это импортировать «png» затем передайте его как опору. Ваша ошибка заключается в попытке использовать относительный путь:
это не правильно
<img источник = {../images/${props.img}} />
Это правильный путь: <img src = {props.img}/>
Если вы хотите загрузить SVG, лучше всего преобразовать его в компонент React, подобный этому.
импортировать React из «реагировать»
функция экспорта по умолчанию MySVG() {
return (
<svg className = "leftArrowSvg" width = "6px" height = "10px" viewBox = "0 0 6 10" version = "1.1" xmlns = "http://www.w3.org/2000/svg">
<g id = "Version-1" stroke = "none" strokeWidth = "1" fill = "none" fillRule = "evenodd" strokeLinecap = "round" strokeLinejoin = "round">
<g id = "Replay-Meeting---Key-Word-Tag" transform = "translate(-37.000000, -40.000000)" stroke = "#ffffff" strokeWidth = "2">
<g id = "Header" transform = "translate(0.000000, 24.000000)">
<g id = "Back-Button" transform = "translate(38.000000, 8.000000)">
<polyline id = "Arrow" transform = "translate(2.000000, 13.000000) rotate(-360.000000) translate(-2.000000, -13.000000) " points = "4 9 0 13 4 17"> </polyline>
</g>
</g>
</g>
</g>
</svg>
)
}
Как конкретно это не удается? Что представляет собой результирующий элемент
<img>в отображаемом HTML-коде в вашем браузере? Каков атрибутsrcэтого элемента? Запрашивает ли браузер URL-адрес этого изображения? Какой ответ сервера?