@Yu_yukk_Y (ゆっきー)posted at 2022-03-26

chakra UIのimageコンポーネントのsrcがうまく反映されない(Next/imageも)

Q&A

Closed

解決したいこと

フロントエンド初心者です。
Next.jsでアプリを作っているのですが、next/imageの画像の表示がうまくいかず困っています。
具体的には、srcにstring型の変数を代入しISRしたとき、ソース上では別の値が表示されてしまっています。

調べてもそれらしい解決方法がわからず八方塞がりです。
有識者の方がおりましたら、どうかご教授いただけないでしょうか。

発生している問題・エラー

ソースコード


import { Box, HStack, Image, Text, VStack } from "@chakra-ui/react";
import { GetServerSideProps, GetStaticProps, NextPage } from "next";
import { Router, useRouter } from "next/router";
import axios, { Axios, AxiosError, AxiosResponse } from "axios";
import perfectQuestion from "../../entity/qa/perfectQuestion";
import QALayout from "../../components/qa/qaLayout";
import question from "../../entity/qa/question";

interface Props{
    content:content
}

const Page: NextPage<Props> = ({content}) => {
    const router = useRouter()
    if(!router.isFallback && !content) router.push("/404")
    if(router.isFallback){
        return (
            <Box>now loading</Box>
        )
    }
    const DEFAULT_IMAGE_PATH: string = (process.env.DEFAULT_PROFILE_IMAGE_PATH) ? process.env.DEFAULT_PROFILE_IMAGE_PATH : ""
    const ICON_IMAGE_URL: string = (content.image) ? content.image : DEFAULT_IMAGE_PATH
    console.log(ICON_IMAGE_URL)
    return (
        <QALayout>
            <VStack w={{ base:"100%",sm:"100vw",md:"calc(100vw - 270px)",lg:"calc(100vw - 210px)" ,"xl":"calc(400px + 50vw)" }} paddingLeft={{base:"0",sm:"60px",md:"calc((100vw - 800px) / 2)"}} paddingTop="100px">
                <VStack bgColor="red" w="90%" h="100px">
                    <HStack>
                    <Box width="40px" height="40px" >
                        <Image src={ICON_IMAGE_URL} alt="画像"></Image>
                    </Box>
                    <Text>{content.postedBy}</Text>
                    </HStack>
                </VStack>
            </VStack>
        </QALayout>
    )
}

問題の箇所

こちらがうまく解釈されません。

<Image src={ICON_IMAGE_URL} alt="画像"></Image>

デベロッパーツールで表示したソース

Imageタグのところが次のようになってしまいます。

<img alt="画像" src(unknown) chakra-image css-0>

試したことその1

const ICON_IMAGE_URL: string = (content.image) ? content.image : DEFAULT_IMAGE_PATH

を

const ICON_IMAGE_URL: string = (content.image) ? content.image : "image/img.png"

にしてみました

結果

表示がうまくいった

<img alt="画像" src="image/img.png" chakra-image css-0>

試したことその2

next/imageで最初と同様に変数を代入してみた

結果

最初同様にうまくいかなかった(src(unknown)となった)

最後に

重ねてにはなりますが、有識者の方がおりましたら原因、または解決方法をご教授願います

0 likes

Are you sure you want to delete the question?