for (let i = 0; i < c.esSourceData!.length; i++) {
if (c.esSourceData !== undefined && c.esSourceData) {
const responseData: any = c.esSourceData[i].tcpdata
const htmlTagIndex = responseData.indexOf('<');
let dataBeforeHTML: any
if (htmlTagIndex !== -1) {
dataBeforeHTML = responseData.substring(0, htmlTagIndex);
c.esSourceData[i].tcpdata = dataBeforeHTML
}
}
const activeCountryName = c.esSourceData[i].ipsdat_data_country;
console.log(activeCountryName);
if (activeCountryName) {
const matchedCountry = allCountries.find((item) => item.name === activeCountryName);
if (matchedCountry) {
// 直接在当前搜索结果对象上添加svgFile字段
c.esSourceData[i].svgFile = matchedCountry.svgFile;
console.log('Matched country SVG:', matchedCountry.svgFile);
}else {
console.log('No matching country found for:', activeCountryName);
}
}
// countryInfo.value = countryInfoList
const son = c.esSourceData![i];
const newItem = { _score: c.esSourceData![i] };
SearchList.value.push(newItem);
console.log(SearchList.value);
allCountries为json文件,去拿后端获取到的数据跟json的name相匹配,如果匹配就把json的svgFile也就是路径传到SearchList.value里面
ManiContainer.vue
<img :src="countrySvgSrc">
const countrySvgSrc = ref('');
watchEffect(() => {
for (const item of SearchList.value) {
if (item._score && item._score.svgFile) { // 检查 _score 和 svgFile 是否存在
getCountrySvgSrc(item._score.svgFile);
}
}
});
async function getCountrySvgSrc(value:string) {
try {
const imageModule = await import(`/@/assets/country_img/${value}.svg`);
countrySvgSrc.value = imageModule.default;
} catch (error) {
console.error(`Failed to import SVG file for ${value}:`, error);
// 如果导入失败,则设置默认的图片URL
countrySvgSrc.value = require('/@/assets/country_img/China_CN.svg');
}
}
另外一个页面接收到数据就去把数据进行判断,如果有svgfile的话再进行渲染,无的话就下一个
async把路径变为动态能显示的