En el proyecto, me encontré con el problema de que no se mostraba la imagen img.Después de mirar el código anterior, descubrí que la etiqueta img en jsx se configuró usando la etiqueta img de HTML, que no surtió efecto, así que grabé el récord de boxes.
Echemos un vistazo a la configuración de la etiqueta img en HTML:
1) Camino relativo
2) Ruta absoluta
网络上的图片:
<img src="https://publish-pic-cpu.baidu.com/f6c87c36-99a7-4493-9615-a5c11f21ae60.png@h_152|c_1,w_228" \>
本地图片:
<img src="file:///D:/photo/二次元/10.jpg" width="1000" height="500" />Pero en el archivo jsx, no se admite escribir directamente la ruta de la imagen en la etiqueta, puede usar los siguientes dos métodos para importar la imagen:
1) método de importación: (este método se usa en el proyecto)
import imgURL from './../images/photo.png';
<img src={imgURL } />2) método require: (use require, require solo puede contener cadenas y no variables)
<img src={require('./../images/photo.png')} />O asigne require a una variable por adelantado, y luego asigne la variable a src
const iconUrl = require('~/shared/assets/image/icon-document-tip-108-108.png')
<img className="icon" src={iconUrl} alt="" />Además, si necesitamos implementar la carga dinámica de imágenes, a menudo introducimos una variable en require, como esta:
const iconUrl = "~/shared/assets/image/icon-document-tip-108-108.png"
<img className="icon" src={require(iconUrl)} alt="" />Pero la forma de escribir anterior es incorrecta. Una variable no se puede asignar directamente en require, y la imagen no se cargará. La solución puede ser similar a la siguiente:
Referencia: El uso del atributo src de la etiqueta img en el proyecto de reacción - Bei Zihan Xi - Blog Garden