下一个图像组件不加载图像

Question

我对下一个图像组件有疑问，因为它似乎没有加载图像。组件设置如下

<Image  className={styles.imgHomeBlock} 
                        src={testImg}
                        alt='Commercial' 
                        width='500' 
                        height='500'
                />

testImg 的导入方式

import testImg from '../../public/google-map-fake.jpg';

当我打开它时它不会加载，因为它正在“localhost:3000/_next/image/google-map-fake.jpg”上寻找图像，并且该文件夹在任何地方都不存在。

在 html img 中提供图像效果很好。图片放在公用文件夹中，公用文件夹在项目的根目录下。

将 url 直接放入下一个 Image 组件，将其作为 prop 从其父组件传递或将外部 url 再次放在那里会中断。例如，当我放置图像的外部 url 时，我仍然得到 404 并且控制台指示它正在“localhost:3000/_next/image/https://{image_url_here}”上寻找图像。

有没有办法改变 Image 组件使用的“_next/image”前缀，否则为什么组件不会像 img 标签那样直接显示来自公共文件夹的图片？

这是完整的组件代码：

import {useState} from 'react';
import Link from "next/link";
import Image from 'next/image'
import styles from '../../styles/T01/t01HomeBlock.module.css';

import testImg from '../../public/google-map-fake.jpg';

const T01HomeBlock = (props) => {


  return (
      <div className={styles.blockWrap}>
          <div className={styles.imgWrap}>
              <Link href={props.target}><a><p className={styles.text1}>{props.overlay}</p></a></Link>


              <Link href={props.target}><a>
            
                  <img className={styles.imgHomeBlock} src={props.bkg} alt={props.overlay}/>  //this works

                {/*
                <Image  className={styles.imgHomeBlock} 
                        src={testImg}
                        alt='Commercial' 
                        width='500' 
                        height='500'
                /> //this doesn't
                */}


            </a></Link>




        </div>
        <p className={styles.blockText}>{props.text}</p>
    </div>
   );

}

export default T01HomeBlock;

Answer 1

尝试不使用模块导入图片，而是立即插入到src中

import React, {useState} from 'react';
import Link from "next/link";
import Image from 'next/image'
import styles from '../../styles/T01/t01HomeBlock.module.css';
const T01HomeBlock = (props) => {


  return (
      <div className={styles.blockWrap}>
          <div className={styles.imgWrap}>
              <Link href={props.target}><a><p className={styles.text1}>{props.overlay}</p></a></Link>


              <Link href={props.target}><a>
            
                  <img className={styles.imgHomeBlock} src={props.bkg} alt={props.overlay}/>  //this works

                {/*
                <Image  className={styles.imgHomeBlock} 
                        src='/google-map-fake.jpg'
                        alt='Commercial' 
                        width='500' 
                        height='500'
                /> //this doesn't
                */}


            </a></Link>




        </div>
        <p className={styles.blockText}>{props.text}</p>
    </div>
   );

}

export default T01HomeBlock;

P.S请注意，路上没有公众，本该如此