Quiero obtener imágenes de json a la función javascript, pero en lugar de mostrar la imagen, solo muestra el nombre del archivo de imagen. A continuación se muestra la función javascript
import React from "react"; import IosAppName from './appStoreData.json'; import './Ios_search.css'; import {useState} from 'react'; function Ios_search(){ const[searchTerm, setSearchTerm] = useState('') return( <div className='ios'> <input type='text' placeholder='Search' onChange={event => {setSearchTerm(event.target.value)}}></input> {IosAppName.filter( app_name =>{ if(searchTerm == '') return '' else if(app_name.appStore.toLowerCase().includes(searchTerm.toLowerCase())) return app_name } ) .map((all_app_names) => {return <p>{all_app_names.appStore} {all_app_names.image}</p>})} </div> ); } export default Ios_search;Y estos son los datos ficticios 👇
[ {"appStore":"Cardguard", "image": "AS.jpg"}, {"appStore":"Temp"}, {"appStore":"Tempsoft"}, {"appStore":"Stim"}, {"appStore":"Tin"}, {"appStore":"Aerified"}, {"appStore":"Ventosanzap"}, ]esto es lo que parece cuando se busca- Barra de búsqueda
Para mostrar una imagen en un sitio web, debe usar la etiqueta <img> . En este momento {all_app_names.image} vive dentro de una etiqueta <p> . Es por eso que simplemente muestra el nombre de los archivos. Puedes reescribir esto para que sea
.map((all_app_names) => {return <p>{all_app_names.appStore} <img src={all_app_names.image}/> </p>})}Sin embargo, algo a tener en cuenta, el atributo src en la etiqueta de la imagen, requiere el valor de ruta directa o enlace directo adecuado.
Si el valor de la ruta directa es incorrecto, mostrará un marcador de posición de imagen vacío.
Dependiendo de dónde se almacene la imagen que está obteniendo, es posible que deba modificar un poco el valor obtenido en la base de datos. Puede leer más sobre las etiquetas img aquí: https://www.w3schools.com/tags/tag_img.asp
Yo también tuve este problema, pero pude resolverlo simplemente moviendo mis imágenes a la carpeta pública y buscándolas desde allí. Esto no solo es más fácil, sino que también elimina la compleja jerarquía de rutas de archivos.