Img标签里面的表格不起作用

时间:2015-04-15 21:12:26

标签: html pug

您好我正在尝试使用Jade在表单内部显示图像。错误指向p标记。当我不包含图像时,p标签按预期工作。这让我相信它是导致错误的img标签。我可以在表单中包含img标记吗?如果我在“更新”按钮下方的表单外部底部添加图像,则可以正常工作。出于审美原因,我试图在表单内部显示图像。

以下是没有正确运行图像的代码副本:

   3 block content
   4     h1.
   5        News Article ID #{newsarticle._id}
   6     form(action='/newsarticles/#{newsarticle._id}/edit',method='post',name='updatenewsarticle',enctype='multipart/form-data')
   7        p Title: 
   8            input(type='text', value='#{newsarticle.articletitle}', name='articletitle')
   9        p Text for News Article: 
   10           textarea(rows="5", cols="40", name='bodytext') #{newsarticle.bodytext}
   11       p Current Image:
   12       p Update News Article Image:
   13           input(type="file" name="profpic")
   14       p 
   15           button#btnSubmit(type='submit').
   16               Update

以下是我尝试将图像插入第12行的当前图像段落的代码副本:

   3 block content
   4     h1.
   5        News Article ID #{newsarticle._id}
   6     form(action='/newsarticles/#{newsarticle._id}/edit',method='post',name='updatenewsarticle',enctype='multipart/form-data')
   7        p Title: 
   8            input(type='text', value='#{newsarticle.articletitle}', name='articletitle')
   9        p Text for News Article: 
   10           textarea(rows="5", cols="40", name='bodytext') #{newsarticle.bodytext}
   11       p Current Image:
   12           img(src='#{newsarticle.imgurl}')
   13       p Update News Article Image:
   14           input(type="file" name="profpic")
   15       p 
   16           button#btnSubmit(type='submit').
   17               Update

这是我尝试插入图片时抛出的错误日志。它指向第11行错误是意外文本p:

      9|        p Text for News Article: 
     10|            textarea(rows="5", cols="40", name='bodytext') #{newsarticle.bodytext}
   > 11|        p Current Image: 
     12|            img(src='#{newsarticle.imgurl}')    
     13|        p Update News Article Image:
     14|            input#inputProfPic(type="file" name="profpic")

   unexpected text  
        p 

我还尝试从段落中移除图像,然后将其放在当前图像下面:第12行的文本如下所示,但它仍然会抛出与上面完全相同的错误:

   3 block content
   4     h1.
   5        News Article ID #{newsarticle._id}
   6     form(action='/newsarticles/#{newsarticle._id}/edit',method='post',name='updatenewsarticle',enctype='multipart/form-data')
   7        p Title: 
   8            input(type='text', value='#{newsarticle.articletitle}', name='articletitle')
   9        p Text for News Article: 
   10           textarea(rows="5", cols="40", name='bodytext') #{newsarticle.bodytext}
   11       p Current Image:
   12       img(src='#{newsarticle.imgurl}')
   13       p Update News Article Image:
   14           input(type="file" name="profpic")
   15       p 
   16           button#btnSubmit(type='submit').
   17               Update

这是从段落中删除图像时抛出的错误日志:

       9|       p Text for News Article: 
      10|           textarea(rows="5", cols="40", name='bodytext') #{newsarticle.bodytext}
    > 11|       p Current Image: 
      12|       img(src='#{newsarticle.imgurl}')    
      13|       p Update News Article Image:
      14|           input#inputProfPic(type="file" name="profpic")

   unexpected text  
        p

很抱歉打扰你,并提前感谢您的时间。如果有什么我能提供的更有帮助请告诉我。

编辑:回答感谢@jennifer我意识到我希望完成的事情绝对是可能的。删除并重写代码后,它工作。我看不出区别,但这里是代码的工作版本:

    extends ../layout

    block content
        h1.
            News Article ID #{newsarticle._id}
        form(action='/newsarticles/#{newsarticle._id}/edit',method='post',name='updatenewsarticle',enctype='multipart/form-data')
            p Title: 
                input(type='text', value='#{newsarticle.articletitle}', name='articletitle')
            p Text for News Article: 
                textarea(rows="5", cols="40", name='bodytext') #{newsarticle.bodytext}
            p Current Image:
                img(src='#{newsarticle.imgurl}')    
            p Update News Article Image:
                input#inputProfPic(type="file" name="profpic")
            p 
                button#btnSubmit(type='submit').
                    Update

编辑#2 **我已经确定了错误。因此,其他人几乎不可能检测到,但我已经复制了它。它出现在第11行,这是因为我在当前图像之后击中了空格键:所以代码实际上看起来像这样

    11     p Current Image:" "

但没有引号。我只是将它们包括在内以显示空间所在的位置。

编辑3 **这不是精确定位的解决方案现在我可以在第11行插入一个空格,它很好。我仍在研究导致错误抛出的原因。我目前认为这是一个间距问题。会让你更新。

1 个答案:

答案 0 :(得分:2)

我不确定您的特定代码的细分位置,但没有理由您不能在表单中包含图片。您可以在表单中包含任何HTML元素。