Javascript Vue.js-更改我动态创建的未定义img源

我正在玩vue js和第三方API。我已经成功地获取了

json

数据并将其显示在我的html中，但我正在努力处理这些图像。

json

文件中缺少一些图像，因此我将它们本地存储在笔记本电脑中

我曾尝试在html中使用v-if设置空图像源，但运气不好。（请参见我的html文件中的注释）

我还尝试为每个

img

分配一个类，然后我尝试使用jquery

$（“#zTTWa2”）.attr（“src”，“missing#beers-logo/11.5%20plato.png”）设置
img
源代码也没有运气

我的错在哪里？也许我的方法是完全错误的，因为我是新的编码和任何建议将不胜感激。先谢谢你


var-app=新的Vue({
el:“应用程序”，
数据：{
啤酒：[]，
decrArray:[]，//带有img链接的数组
cleanedArray:[]，//无未定义
路径：0，
图片：[missing_beers-logo/11.5%20plato.png”，“missing_beers-logo/11.5%20plato.png”，“missing_beers-logo/11.5%20plato.png”，“missing_beers-logo/11.5%20plato.png”，“missing_beers-logo/11.5%20plato.png”，“missing_beers-logo/11.5%20plato.png”，“missing_beers-logo/11.5%20plato.png”，
“missing_beers-logo/11.5%20plato.png”、“missing_beers-logo/11.5%20plato.png”、“missing_beers-logo/11.5%20plato.png”、“missing_beers-logo/11.5%20plato.png”、“missing_beers-logo/11.5%20plato.png”、“missing_beers-logo/11.5%20plato.png”、“missing_beers-logo/11.5%20plato.png/11.5%",
“missing_beers-logo/11.5%20plato.png”、“missing_beers-logo/11.5%20plato.png”、“missing_beers-logo/11.5%20plato.png”、“missing_beers-logo/11.5%20plato.png”]，
已创建：函数（）{
这是getData（）；
},
方法：{
getData:function（）{
变量fetchConfig=
取回（“http://api.brewerydb.com/v2/beers?key=6a3ac324d48edac474417bab5926b70b&format=json", {
方法：“获取”，
数据类型：“jsonp”，
//响应类型：'application/json'，
//“内容类型”：“应用程序/json”，
标题：新标题({
“X-API-Key”：“6a3ac324d48edac474417bab5926b70b”，
“内容类型”：“应用程序/json”，
“访问控制允许凭据”：true，
“访问控制允许源”：“*”，
“访问控制允许方法”：“获取”，
“访问控制允许标头”：“应用程序/json”，
})
}).然后（功能（响应）{
if（response.ok）{
返回response.json（）；
}
}).then（函数（json）{
log（“我的json”，json）
//控制台日志（“hi”）；
app.beers=json.data；
控制台日志（app.beers）；
app.pushDescr（）；
console.log（app.decrArray）；
app.removeUndef（）；
//控制台日志（应用程序cleanedaray）；
})
.catch（函数（错误）{
console.log（错误）；
})
},
pushDescr:function（）{
控制台日志（“hi”）；
对于（变量i=0；i


{{value.name}
使用网页包本地图像被视为类似于模块，因此您应该像以下那样要求或导入它们：

 <img :src="localImg" />

或

如果您有一组图像，我建议您使用以下方法：

  <div v-else>
    <img :src="getMissingImg(index)" />
  </div>

您的方法如下所示：

   getMissingImg(index){

       return require(this.images[index]);
      }

如果您在
中使用
：
，则字符串将被视为变量。它应该是
。然后您必须打开浏览器检查器来检查图像的路径是否正确。@Kokodoko非常感谢您的帮助。您的意思是If/else语句应该是这样的吗？您检查路径是否正确路径是否正确，因为我可以看到括号中的图像，如果我更改了顺序，我只能看到列表中的第一个位置…if/else语句出现问题，因为当我尝试此操作时，我可以看到阵列中的每个img非常感谢您的帮助。在我的cas中e我有不止一张丢失的照片，我必须将其替换。我如何处理这种情况？我可以将它们存储在数组中而不是localImg:？我已经编辑了我的初始代码。我创建了一个带有img url的数组，我尝试在else语句中检索它，但仍然运气不佳。我只能看到我列表中的第二张照片。我真是太感谢你了……这是什么require？这是一个数组吗？我通过添加一些详细信息更新了我的答案，
require
是一个加载外部文件（如图像或js文件）的函数。可能这对您来说很烦人，但您能否使用require再次给我写一封关于数组的语法，因为您删除了上一条评论，而我对此没有把握。图像：[“missing_beers-logo/420%20fest.jpg”、“missing_beers-logo/15th%20aniversarry.png”、“missing_beers-logo/15th%20aniversarry.png”、“missing_beers-logo/3%20Weight%20beer%20.png”]，
  <div v-else>
    <img :src="getMissingImg(index)" />
  </div>

images: ["missing_beers-logo/420%20fest.jpg","missing_beers-logo/15th%20aniversarry.png","missing_beers-logo/15th%20aniversarry.png","missing_beers-logo/3%20Weight%20beer%20.png"] 

   getMissingImg(index){

       return require(this.images[index]);
      }