Как добавить изображение в React
Я не могу найти правильный синтаксис для предоставления изображения по URL-адресу.
<image src='url(' +${this.url}+ ')'
style = {{
height: 'auto',
width: '100%'
}}></image>
Можете ли вы дать мне источник, чтобы узнать, когда использовать: ${}, {}, ``, ""?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
<image src = {this.url}
style = {{
height: 'auto',
width: '100%'
}}></image>
а если он в реквизитах ставишь {this.props.url}
При написании jsx весь ваш код javascript должен находиться внутри операторов {}.
${} используется, когда вы используете синтаксис литерала шаблона, т.е. ``.
<image url = {`url(${this.url})`} />
В вашем случае вам следует написать:
<image src= {this.url}
style = {{
height: 'auto',
width: '100%'
}}></image>
Вы используете {}, когда есть переменная "", когда это строка, и $ {}, когда находитесь внутри обратной кавычки ``
Потому что тебе это не нужно. Если URL-адрес не является одной из ваших собственных функций, и вы не применяете пользовательские изменения к своему URL-адресу. Но url, безусловно, зарезервировано.
использовать шаблонные литералы Справка
<image src= {`${this.url}`}
style = {{
height: 'auto',
width: '100%'
}}></image>
этот синтаксис недопустим: src= $ {this.url} ``, и я получаю предупреждение от eslint: Parsing error: JSX value should be either an expression or a quoted JSX text
`` используйте в основном, если вы не хотите нарушать свой код или строку, что в основном происходит с '' или "", как это
console.info('string text line 1\n' +
'string text line 2');
решение использовать ''
console.info(`string text line 1
строка текста 2`);
${} используется в `` и эквивалентен + в ''
var a = "hello";
console.info(`string text line 1 ${a}
string text line 2`);
{} - это синтаксис JSON и используется для styleobject, которые принимают только JSON, если вы добавляете встроенный
"" совпадает с ''
Просто используйте `` а не ''
<image src= `${this.url}`
style = {{
height: 'auto',
width: '100%'
}}></image>
Спасибо. Вы также можете дать мне ответ на мою конкретную проблему с изображением?
потому что изображение - это URL-адрес из Интернета, а не на моем локальном компьютере. или это не важно?
Нет. Не имеет значения, что вы можете использовать без url(). Мы используем url() в основном, когда устанавливаем фоновое изображение с помощью css.
Поскольку атрибуты html не могут быть объединены, как myattr='my'+dynamic+'value, React предоставляет нам фигурную скобку для использования динамического значения:
<image src = {'url(' + this.url + ')'} />
Обратите внимание, конкатенация выполняется внутри фигурной скобки {}.
Но сегодня мы в основном используем функции ES6 +, поэтому объединение их с помощью оператора + - уродливое решение. Следовательно, мы используем литерал шаблона с ключом тильды `
<image src = {`url${this.url}`} />
Чтобы использовать переменную внутри литерала шаблона, мы используем ${variable_name}.
Кроме того, я подозреваю, что здесь функция url (), вы где-нибудь определили? В противном случае вам не следует использовать, просто используйте:
<image src = {this.url} />
Значение src - это просто путь к образу src = "path.jpg", но не src = "url(path.jpg)".
Кроме того, является ли изображение компонентом? В противном случае это должен быть тег <img />, а не <image />. Если image является компонентом, я предлагаю вам использовать имя с заглавной буквы в вашем компоненте, даже если они являются функциональным компонентом.
Я не вижу изображения. Когда я делаю: <div className = "image-root responsive" style = {{ backgroundImage: url ($ {this.url}) , height: 1000, width: 1000 }}/>, он работает.
высота ширина должна иметь размер около 1000 пикселей.
Спасибо, что все еще не работает. Я даже пробовал: <image src = {url $ {this.url)} } style = {{ height: '1000px', width: '1000px' }}></image>
Вы можете попробовать открыть сломанное изображение и посмотреть, в порядке ли путь.
Это потому, что когда я использую его в качестве фонового изображения, он работает нормально.
Да! У меня Image не входит в комплект. По ошибке я использовал его вместо img. а также я подумал, что здесь нужна функция url еще и потому, что я также использовал ее в фоновом изображении. Спасибо!
почему вы опускаете функцию
url?