Question

var topArticle=new Vue({
  el:'#toparticle',
  data:{topmostArticle:null},
  created: function(){
              fetch('topnews.json')
              .then(r=>r.json())
              .then(res=>{this.topmostArticle=$.grep(res,function(e){return e.topnews!==" "});
              console.log(this.topmostArticle);
              });
            }
        });

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>The greatest news app ever</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <body>

    <div id  ="toparticle">
      <img src="{{topmostArticle[0].topnews[0].img}}">
      <img src="2.jpg">
      "{{topmostArticle[0].topnews[0].img}}"
    </div>

    <script src="main.js"></script>

  </body>
</html>

我正在尝试使用外部文件加载图像的源，但我遇到了一些问题...图像标记中无法识别源。代码应该是正确的，因为当数据加载到图像标记之外时它很好用。任何人有任何想法？非常感谢你！

没有加载第一个图像（因为src是通过json传输的），第二个是ok，第三个命令是“{{topmostArticle [0] .topnews [0] .img}}”，返回“2”。 jpg“所以没关系

JSON

           [{"topnews":[
                {"timestamp":"0",
                 "id":"2",
                 "cathegory":"2",
                 "headline":"2",
                 "text":"2",
                 "img":"2.jpg",
                 "url":"2.jpg",
                 "author":"2",
                 "comments":"2"
                },
                {"timestamp":"0",
                 "id":"2",
                 "cathegory":"3",
                 "headline":"3",
                 "text":"3",
                 "img":"3",
                 "url":"3",
                 "author":"3",
                 "comments":"3"
                 }
              ]}]

问题是为什么我不能直接通过json加载src？请点击下面的链接（网页视图）以获得更清晰的信息！

  [web view][1]

  [1]: https://i.stack.imgur.com/gbFeq.png

Answer 1

获取图像的最简单方法

search_field

Answer 2

尝试更改绑定属性的方式：

Public Function ConcatDelim(ByRef rng As Range, _
    Optional ByVal sDelim As String, _
    Optional ByVal SkipBlanks As Boolean = True, _
    Optional ByVal DoTrim As Boolean = False) As String
' Purpose: Insert Delim between value of each cell in rng
' Inputs:
'   rng = Range to use for values in concatenated string
'   Delim = Delimiter to insert between each value
'   SkipBlanks = If True, must have non-empty value to insert Delim. False will
'               insert delimiters between each cell value, even if blank
'   DoTrim = If True, Trims spaces from cell value before inserting in string
' Returns:
'   String with cell values separated by Delim

    Dim nLoop As Long
    Dim sValue As String
    Dim sResult As String

    If DoTrim Then
        sResult = Trim(rng.Cells(1).Value)
    Else
        sResult = rng.Cells(1).Value
    End If
    For nLoop = 2 To rng.Cells.Count
        If DoTrim Then
            sValue = Trim(rng.Cells(nLoop).Value)
        Else
            sValue = rng.Cells(nLoop).Value
        End If
        If SkipBlanks = False _
            Or ((sResult <> "") And (sValue <> "") And (SkipBlanks)) Then
            sResult = sResult & sDelim
        End If
        sResult = sResult & sValue
    Next nLoop
    ConcatDelim = sResult

End Function

无法通过json（Vue.js）加载图像的“src”

2 个答案: