在 reactjs 项目中，正确显示图片是一个常见的需求，但有时开发者会遇到图片无法加载的问题，尤其是当使用相对路径引用本地图片时。这通常是由于 webpack 等构建工具对静态资源的处理方式不同导致的。以下将介绍几种解决此类问题的方法。
1. 使用 import 语句引入图片
这是推荐的方法，特别是在使用 Create React App 或类似的现代构建工具时。import 语句允许你将图片作为模块导入到你的 React 组件中，Webpack 会正确处理这些导入的图片，并将其包含在最终的构建输出中。
首先，确保你的图片文件位于 src 目录下或其子目录中。然后，在你的 React 组件中使用 import 语句引入图片：
import React from 'react';
import MedicineAImage from './pngegg.png'; // 假设 pngegg.png 位于当前组件的同一目录下
function Medwiki(props) {
const medicines = [
{ name: 'Medicine A ', details: 'Details of Medicine A', image: MedicineAImage },
{ name: 'Medicine B ', details: 'Details of Medicine B', image: 'https://thumbs.dreamstime.com/z/medicine-capsule-logo-vector-illustration-medicine-capsule-logo-file-format-can-be-scaled-to-any-size-141357083.jpg' },
{ name: 'Medicine C ', details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
{ name: 'Medicine C', details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
{ name: 'Medicine C', details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
{ name: 'Medicine C', details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
{ name: 'Medicine C', details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
];
return (
MedWiki
@@##@@
{medicines.map((medicine, index) => (
@@##@@
{medicine.name}
{medicine.details}
))}
);
}
export default Medwiki;在上面的代码中，MedicineAImage 变量现在包含了图片的正确路径，你可以直接将其赋值给 img 标签的 src 属性。
2. 使用 require 语句引入图片
另一种方法是使用 require 语句。虽然 import 更为现代和推荐，但在某些情况下，require 仍然很有用。
function Medwiki(props) {
const medicines = [
{ name: 'Medicine A ', details: 'Details of Medicine A', image: require('./pngegg.png') },
{ name: 'Medicine B ', details: 'Details of Medicine B', image: 'https://thumbs.dreamstime.com/z/medicine-capsule-logo-vector-illustration-medicine-capsule-logo-file-format-can-be-scaled-to-any-size-141357083.jpg' },
{ name: 'Medicine C ', details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
{ name: 'Medicine C', details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
{ name: 'Medicine C', details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
{ name: 'Medicine C', details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
{ name: 'Medicine C', details: 'Details of Medicine C', image: 'https://example.com/medicineC.jpg' },
];
return (
MedWiki
@@##@@
{medicines.map((medicine, index) => (
@@##@@
{medicine.name}
{medicine.details}
))}
);
}与 import 类似，require 也会告诉 Webpack 处理图片资源。
3. 检查文件路径
确保你的文件路径是正确的。在 React 项目中，相对路径是相对于模块文件的位置而言的。如果你的组件文件位于 src/components 目录下，而图片位于 src/assets 目录下，那么正确的路径应该是 '../assets/image.png'。 建议将图片资源放在 src/assets 或者 public/assets 目录下。
4. 使用 public 目录
如果你的项目中有 public 目录，你可以将图片放在该目录下，并使用绝对路径引用它们。例如，如果你的图片位于 public/images/logo.png，那么你可以这样引用它：
@@##@@
public 目录中的文件不会被 Webpack 处理，它们会被直接复制到构建输出目录中。
5. 检查构建配置
如果以上方法都无法解决问题，那么可能是你的构建配置有问题。检查你的 Webpack 配置文件，确保它正确处理了图片资源。通常，你需要使用 file-loader 或 url-loader 来处理图片。
注意事项
- 确保你的图片文件存在，并且没有损坏。
- 检查浏览器控制台，查看是否有任何关于图片加载的错误信息。
- 清除浏览器缓存，有时缓存会导致图片无法正确显示。
总结
在 ReactJS 项目中显示图片可能遇到一些问题，但通过使用 import 或 require 语句，检查文件路径，或使用 public 目录，通常可以解决这些问题。 确保理解你的构建工具如何处理静态资源，并根据你的项目配置选择合适的方法。
