Изображение responsejs не отображается
У меня есть локальное изображение, которое я хочу разместить на своей веб-странице, встроенной в React. Я посмотрел на это, но мне это не помогло. Мой код выглядит следующим образом:
const right = {
float:"right",
fontSize:"18px"
}
export default class CloseUpCam extends Component {
render() {
return (
<div className = "closeupcam" style = {right}>
<div>CLOSEUP CAMERA</div>
<img src = {require('./img/hand.png')} width = "70" height = "50" alt = "cam"/>
</div>
)}}
Сообщения об ошибках отсутствуют. Картинка просто не появляется. Кто-нибудь знает в чем дело? Спасибо.
@JaisonJustus Как?
Как это - <img src = "/img/hand.png" width = "70" height = "50" alt = "cam"/>?
@JaisonJustus Это определенно не работает. Я считаю, что мне это нужно из-за webpack. Раньше я использовал Vuejs, и мне это нужно было для добавления изображений на мою веб-страницу. Я просто не знаю, что я сделал не так, отреагировав
Если вы импортируете изображение (например, импортируете imgVar из './img/hand.jpg'), а затем пишете <img src = {imgVar} />, это поможет? Если нет, измените имя изображения на несуществующее изображение. Вы получаете сообщение об ошибке? Если вы это сделаете, я думаю, это означает, что первый импорт сработал, и проблема в <img src>
@Rahamin Переход на импорт не помогает. И да, это выдает ошибку, если я использовал несуществующее имя изображения. Как мне это исправить?
Так что проблема не в команде импорта, а в img src ... странно. Без понятия. Простите
Единственная идея, которая у меня есть, - начать новый проект с помощью create-react-app и вставить туда только изображение и этот компонент, возможно, это сработает. Ваш код в порядке.
Ответы 4
Поместите изображения в общую папку приложения React и попробуйте
const right = {
float:"right",
fontSize:"18px"
}
export default class CloseUpCam extends Component {
render() {
return (
<div className = "closeupcam" style = {right}>
<div>CLOSEUP CAMERA</div>
<img src = "/imagename.jpg" width = "70" height = "50" alt = "cam"/>
</div>
)}}
Вот рабочий образец
Я попробовал это, и результат тот же. У меня это не работает. Тем не менее, сообщения об ошибке нет.
Да. Если путь неверен, появится сообщение об ошибке. Я пытался.
Можете ли вы поместить изображение в общую папку и попробовать еще раз, я отредактирую код
Получил ошибку: не удалось скомпилировать. Модуль не найден: вы попытались импортировать ../../../public/hand.png, который находится за пределами каталога проекта src /. Относительный импорт вне src / не поддерживается. Вы можете переместить его в src / или добавить на него символическую ссылку из node_modules / проекта.
@Young Я добавил рабочий образец в codeandbox, пожалуйста, проверьте
@Young вам не нужно импортировать изображение, если оно помещено в общую папку
То же самое, изображение все равно не отображается, даже если я помещаю его в общую папку.
ваш способ показа изображения действительно работает в React, я думаю, это вопрос вашего пути к картинке. Вы помещаете все свои статические файлы в общую папку или как вы управляете своими статическими страницами?
<img src = {require('./img/hand.png')} width = "70" height = "50" alt = "cam"/>
Это изображение находится в той же подпапке src, что и мой файл js.
Вы используете create-react-app для создания своего приложения? Wepack имеет ограничение на размер картинки. Если картинка превышает размер в конфигурационном файле, то она не будет упакована. Может ты сможешь это проверить.
Ой. Какой предел по размеру?
Я обнаружил, что ограничение на размер составляет 2 МБ, а мое изображение - всего 39 КБ.
Попробуй это. stackoverflow.com/questions/34582405/…. То же самое и с вами.
Я не видел ничего, что могло бы помочь в этом вопросе.
эм, вы можете сначала проверить свою консоль, а затем посмотреть, успешно ли она загружает картинку?
Я не вижу в своей консоли ничего, связанного с этим конкретным файлом js.
В ответ вы должны импортировать файл изображения, как и все другие файлы.
import Image from "./img/hand.png'
const right = {
float:"right",
fontSize:"18px"
}
export default class CloseUpCam extends Component {
render() {
return (
<div className = "closeupcam" style = {right}>
<div>CLOSEUP CAMERA</div>
<img src = {Image} width = "70" height = "50" alt = "cam"/>
</div>
)}}
Поместите изображения в папку общественный.
Я думаю, это из-за необходимости.