关于react问题 文字图片出不来

Question

为什么文字图片都出不来

代码：

import './index.scss'
// import youji1 from '@/assets/imgs/chongqing/yj1.jpg'
// import tx1 from '@/assets/imgs/chongqing/tx.jpeg'
const data = [
  {
    img: require("@/assets/imgs/chongqing/yj1.jpg"),
    tit: '渝你相约，随心所欲游重庆',
    tx1: require('@/assets/imgs/chongqing/tx.jpeg'),
    author1: '作者：',
    uname1: '半只花的世界',
    answer: '回复:',
    uname2: '紫蓝色',
    time: '24-4-20'

  }
]
const Youji = () => {
  return <div className="youjiBox">
    <div className="img">
      <img src={data.img} alt="游记图片" />
    </div>
    <div className="paragraph">
      <h3>{data.tit}</h3>
      <div className='name'>
        <img src={data.tx1} alt="" className='tximg' />
        <span>{data.author1}</span>
        <span className='ff7200'>{data.uname1}</span>
        <img src={data.tx1} alt="" className='tximg' />
        <span>{data.answer}</span>
        <span className='ff7200'>{data.uname2}</span>
        <span className='grey'>{data.time}</span>
      </div>
      <p className='grey wz'>浅夏，某一天，好友仨人闲约咖啡厅，一杯咖啡的时光，酝酿出一场说走就走的8D魔都—重庆之旅！山城、雾都，是它的别称，重庆依山而建，两江环抱，奇特的山...</p>
    </div>
  </div>
}
export default Youji

Answer 1

引自免费微信小程序：皆我百晓生

在您的代码中，存在几个问题导致了文字和图片可能无法正常显示。以下是针对这些问题的修改建议：

1. 在<img>标签中，您应该使用对象中的属性值，而不是整个数据对象。
2. 图片引用（require）应放在每个单独的对象属性上，而不是放在整个"data"对象上。

根据这些修正，下面是修改后的代码：

import './index.scss'
import yj1 from '@/assets/imgs/chongqing/yj1.jpg'
import tx1 from '@/assets/imgs/chongqing/tx.jpeg'
const data = [
  {
    img: yj1,
    tit: '渝你相约，随心所欲游重庆',
    tx1: tx1,
    author1: '作者：',
    uname1: '半只花的世界',
    answer: '回复:',
    uname2: '紫蓝色',
    time: '24-4-20'

  }
]
const Youji = () => {
  return <div className="youjiBox">
    <div className="img">
      <img src={data[0].img} alt="游记图片" />
    </div>
    <div className="paragraph">
      <h3>{data[0].tit}</h3>
      <div className='name'>
        <img src={data[0].tx1} alt="" className='tximg' />
        <span>{data[0].author1}</span>
        <span className='ff7200'>{data[0].uname1}</span>
        <img src={data[0].tx1} alt="" className='tximg' />
        <span>{data[0].answer}</span>
        <span className='ff7200'>{data[0].uname2}</span>
        <span className='grey'>{data[0].time}</span>
      </div>
      <p className='grey wz'>浅夏，某一天，好友仨人闲约咖啡厅，一杯咖啡的时光，酝酿出一场说走就走的8D魔都—重庆之旅！山城、雾都，是它的别称，重庆依山而建，两江环抱，奇特的山...</p>
    </div>
  </div>
}
export default Youji

这段代码首先导入了所需的图片，并且在 data 对象中使用了正确的图片引用。然后，在渲染组件时，我们从 data 数组的第一个元素中获取具体的属性值。注意，这里假设数组只有一个对象。如果有多个对象，你需要遍历数组并根据需要显示每个对象的信息。

如果还有其他问题，比如样式未正确加载，确保您的 SCSS 文件已经正确导入并编译到 CSS 中。检查浏览器控制台是否有关于资源加载错误的警告，以便进一步排查问题。