Image 带有vue的地块存在图像路径问题

我从一个json文件接收数据，其中每个对象都有以下关于演出/音乐的数据：

{
    "Theatre": [
       {
            "name": "Hairspray",
            "type": "Musical",
            "role": "Dynamite",
            "director": "Sue Ellen Nielson",
            "company": "Stage 1 / East Bay Area",
            "year": "2012",
            "posterImage" : "hairsprayPoster.jpg"
        }  .....
]

}

on the Vue file I have : 

<ul class="show-gallery-list">
                   <li v-for="dataItem in myJson['Theatre']" >

                     {{dataItem.coverImage}} //this prints the path as a string
                     <img :src="dataItem.coverImage"> //this renders an empty image icon 

                </li> 
            </ul>

{
“剧院”：[
{
“名称”：“发胶”，
“类型”：“音乐”，
“角色”：“炸药”，
“导演”：“苏·艾伦·尼尔森”，
“公司”：“第1阶段/东湾区”，
“年份”：“2012年”，
“posterImage”：“hairsprayPoster.jpg”
}  .....
]
}
在Vue文件中，我有：


{{dataItem.coverImage}}//这会将路径打印为字符串
//这将呈现一个空的图像图标

所有其他数据都可以访问并呈现。 我已经用v-bind:src尝试了一切 我尝试导入图像文件夹，但也不起作用

包裹是否允许我动态渲染图像？ 我必须导入所有图像吗？

---

这是一个捆绑问题吗

事实上，与parcelJS的谈话并不是那么直截了当，而是讨论了绕过这个问题的可能替代方案

乍一看，最有希望的似乎是

实现这一点的一种更简单的方法是运行您的包构建，然后在构建文件中创建一个新目录，并在那里复制所有静态资产。如果从HTTP服务器运行包裹生成文件夹，则静态文件也将位于您创建的文件夹中。您只需要确保正确构造了路径