三21 2024-03-16 14:19 采纳率: 81%
浏览 3

为什么图片显示不出来(语言-javascript)

为什么点击后图片加载不出来呢,文字加载也不出来呢,请问大家

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>15-11</title>
    <style>
        dt {
            width: 200px;
            border-left: 5px solid #ccc;
            border-bottom: 1px solid #ccc;
            padding: 0 0 5px 10px;
            margin-bottom: 10px;
            user-select: none;
        }
        dd {
            width  : 600px;
            padding : 0;
            color:#888;
            display: none;
            
        }
        img {
            height: 120px;
            margin-right: 10px;    
        }
        ._display{
            display:flex;
        }
    </style>
</head>
<body>
    <h2>観光地紹介</h2>
    <dl>
        <dt id="qing">清水寺</dt>
        <dd>
            <img src="img/kiyopmizu_640.jpg" alt="清水寺">
            <span>清水寺は法相宗(南都六宗の一)系の寺院で、広隆寺、鞍馬寺とともに、平安京遷都以前からの歴史をもつ、京都では数少ない寺院の1つである。また、石山寺(滋賀県大津市)、長谷寺(奈良県桜井市)などと並び、日本でも有数の観音霊場であり、鹿苑寺(金閣寺)、嵐山などと並ぶ京都市内でも有数の観光地として有名であり、季節を問わず多くの参詣者が訪れる。</span>
            </dd>
        <dt id="fu">伏見稲荷大社</dt>
        <dd>
            <img src="img/fushimi_640.jpg" alt="伏見稲荷大社">
            <span>伏見稲荷大社は、京都府京都市伏見区深草にある神社。旧称は稲荷神社。式内社、二十二社の一社。旧社格は官幣大社で、現在は神社本庁に属さない単立神社。稲荷山の麓に本殿があり、稲荷山全体を神域とする。 全国に約3万社あるといわれる稲荷神社の総本社である。初詣では近畿地方の社寺で最多の参拝者を集める。    </span>

        </dd>
        <dt id="jin">金閣寺</dt>
        <dd>
            <img src="img/kinkakuji_640.jpg" alt="金閣寺">
            <span>鹿苑寺(ろくおんじ)は、京都市北区にある臨済宗相国寺派の寺。建物の内外に金箔を貼った3層の楼閣建築である舎利殿は金閣(きんかく)、舎利殿を含めた寺院全体は金閣寺(きんかくじ)として知られる。相国寺の山外塔頭寺院である</span>
        </dd>
        <dt id="ping">平等院</dt>
        <dd>
            <img src="img/byoudouin_640.jpg" alt="平等院">
            <span>平等院(びょうどういん)は、日本の近畿地方の、京都府宇治市宇治蓮華に所在する、藤原氏ゆかりの仏教寺院。山号は朝日山。開基は藤原頼通、開山は明尊。本尊は阿弥陀如来坐像。</span>
        </dd>
    </dl>

    <script>
        'use strict';
        const text1=document.querySelector('#qing dd');
        const text2=document.querySelector('#fu dd');
        const text3=document.querySelector('#jin dd');
        const text4=document.querySelector('#ping dd');
        document.querySelector('#qing').addEventListener('click',()=>{
            text1.classList.toggle('_display');
        });
        document.querySelector('#fu').addEventListener('click',()=>{
            text2.classList.toggle('_display');
        });
        document.querySelector('#jin').addEventListener('click',()=>{
            text3.classList.toggle('_display');
        });
        document.querySelector('#ping').addEventListener('click',()=>{
            text4.classList.toggle('_display');
        });




    </script>
</body>
</html>

  • 写回答

4条回答 默认 最新

  • 关注

    三21 下午好🌅🌅🌅
    本答案参考ChatGPT-3.5

    问题出在HTML代码中的图片路径上。在给定的代码中,图片的路径是相对于当前HTML文件的。图片标签中的src属性指向的是img/kiyopmizu_640.jpgimg/fushimi_640.jpgimg/kinkakuji_640.jpgimg/byoudouin_640.jpg。然而,检查提供的代码,我们并没有在同级目录下找到一个名为img的文件夹,这也是为什么图片无法显示的原因。

    要解决此问题,可以尝试以下几个步骤:

    1. 创建一个名为img的文件夹,将所有的图片文件(kiyopmizu_640.jpgfushimi_640.jpgkinkakuji_640.jpgbyoudouin_640.jpg)放入该文件夹。
    2. 修改图片标签的src属性,使其指向正确的图片路径。将img/kiyopmizu_640.jpg替换为img/kiyomizu_640.jpg,将img/fushimi_640.jpg替换为img/fushimiinari_640.jpg,将img/kinkakuji_640.jpg替换为img/kinkaku_640.jpg,将img/byoudouin_640.jpg替换为img/byodo_640.jpg
    3. 保存并重新加载HTML文件,然后查看图片是否能够正确显示。

    在修复图片路径的基础上,还存在文字加载不出来的问题。这是因为CSS中为dd元素设置了display: none;导致的。这会将文字隐藏起来,点击后才会显示。所以,点击无效是因为CSS样式的原因。

    要解决此问题,可以进行以下修改:

    1. 在CSS样式中,将display: none;改为display: block;,这样文字内容就会在页面加载时显示出来。
    2. 保存并重新加载HTML文件,然后点击相关的dt元素,查看文字是否能够正确加载和显示。

    修复后的代码如下:

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>15-11</title>
        <style>
            dt {
                width: 200px;
                border-left: 5px solid #ccc;
                border-bottom: 1px solid #ccc;
                padding: 0 0 5px 10px;
                margin-bottom: 10px;
                user-select: none;
            }
    
            dd {
                width: 600px;
                padding: 0;
                color: #888;
                display: block;
            }
    
            img {
                height: 120px;
                margin-right: 10px;
            }
    
            ._display {
                display: flex;
            }
        </style>
    </head>
    <body>
        <h2>観光地紹介</h2>
        <dl>
            <dt id="qing">清水寺</dt>
            <dd>
                <img src="img/kiyomizu_640.jpg" alt="清水寺">
                <span>清水寺は法相宗(南都六宗の一)系の寺院で、広隆寺、鞍馬寺とともに、平安京遷都以前からの歴史をもつ、京都では数少ない寺院の1つである。また、石山寺(滋賀県大津市)、長谷寺(奈良県桜井市)などと並び、日本でも有数の観音霊場であり、鹿苑寺(金閣寺)、嵐山などと並ぶ京都市内でも有数の観光地として有名であり、季節を問わず多くの参詣者が訪れる。</span>
            </dd>
            <dt id="fu">伏見稲荷大社</dt>
            <dd>
                <img src="img/fushimiinari_640.jpg" alt="伏見稲荷大社">
                <span>伏見稲荷大社は、京都府京都市伏見区深草にある神社。旧称は稲荷神社。式内社、二十二社の一社。旧社格は官幣大社で、現在は神社本庁に属さない単立神社。稲荷山の麓に本殿があり、稲荷山全体を神域とする。 全国に約3万社あるといわれる稲荷神社の総本社である。初詣では近畿地方の社寺で最多の参拝者を集める。</span>
            </dd>
            <dt id="jin">金閣寺</dt>
            <dd>
                <img src="img/kinkaku_640.jpg" alt="金閣寺">
                <span>鹿苑寺(ろくおんじ)は、京都市北区にある臨済宗相国寺派の寺。建物の内外に金箔を貼った3層の楼閣建築である舎利殿は金閣(きんかく)、舎利殿を含めた寺院全体は金閣寺(きんかくじ)として知られる。相国寺の山外塔頭寺院である</span>
            </dd>
            <dt id="ping">平等院</dt>
            <dd>
                <img src="img/byodo_640.jpg" alt="平等院">
                <span>平等院(びょうどういん)は、日本の近畿地方の、京都府宇治市宇治蓮華に所在する、藤原氏ゆかりの仏教寺院。山号は朝日山。開基は藤原頼通、開山は明尊。本尊は阿弥陀如来坐像。</span>
            </dd>
        </dl>
    
        <script>
            'use strict';
            const text1 = document.querySelector('#qing dd');
            const text2 = document.querySelector('#fu dd');
            const text3 = document.querySelector('#jin dd');
            const text4 = document.querySelector('#ping dd');
            
            document.querySelector('#qing').addEventListener('click', () => {
                text1.classList.toggle('_display');
            });
    
            document.querySelector('#fu').addEventListener('click', () => {
                text2.classList.toggle('_display');
            });
    
            document.querySelector('#jin').addEventListener('click', () => {
                text3.classList.toggle('_display');
            });
    
            document.querySelector('#ping').addEventListener('click', () => {
                text4.classList.toggle('_display');
            });
        </script>
    </body>
    </html>
    
    评论

报告相同问题?

问题事件

  • 创建了问题 3月16日

悬赏问题

  • ¥15 2024电赛H题指导
  • ¥15 第三方如何控制E8a进行烧录
  • ¥15 关于lua调用DLL的c/c++动态库(相关搜索:数据库)
  • ¥15 openwrt结合智能家居(相关搜索:路由器)
  • ¥15 求一款免费的pdf编辑js,web端用的
  • ¥15 求分析下图晶体与三极管组成的振荡电路
  • ¥100 多线程+连接池+代理 运行一段时间线程阻塞
  • ¥15 关于#单片机#的问题:求一个使用C语言将重力加速度gx,gy,gz积分获取到速度的代码(相关搜索:c语言)
  • ¥15 matlab导致电脑重启问题
  • ¥20 为何R语言love图显示的分类变量点与smd值不一致