我想從 json 獲取影像到 javascript 函式，但不是顯示影像，而是只顯示影像檔案的名稱。下面是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;
這是虛擬資料??
[
{"appStore":"Cardguard",
"image": "AS.jpg"},
{"appStore":"Temp"},
{"appStore":"Tempsoft"},
{"appStore":"Stim"},
{"appStore":"Tin"},
{"appStore":"Aerified"},
{"appStore":"Ventosanzap"},
]
這是搜索時的樣子 - 搜索 欄
uj5u.com熱心網友回復：
要在網站中顯示影像，您應該使用<img>標簽。現在{all_app_names.image}住在一個<p>標簽內。這就是為什么它只顯示檔案名。您可以將其重新撰寫為
.map((all_app_names) => {return <p>{all_app_names.appStore} <img src={all_app_names.image}/> </p>})}
但是，需要注意的是，影像標簽中的 src 屬性需要正確的直接路徑值或直接鏈接。
如果直接路徑值不正確，它將顯示一個空影像占位符。
根據您獲取的影像的存盤位置，您可能需要稍微調整資料庫獲得的值。您可以在此處閱讀有關 img 標簽的更多資訊：https : //www.w3schools.com/tags/tag_img.asp
如果這有幫助，請告訴我:)！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/330962.html
標籤：javascript 数组 反应 json 数据库