图片未显示在循环Vue.js中

如何解决图片未显示在循环Vue.js中

我正在尝试使用from github import Github g = Github("username","password") repo = g.get_user().get_repo(GITHUB_REPO) all_files = [] contents = repo.get_contents("") while contents: file_content = contents.pop(0) if file_content.type == "dir": contents.extend(repo.get_contents(file_content.path)) else: file = file_content all_files.append(str(file).replace('ContentFile(path="','').replace('")','')) with open('/tmp/file.txt','r') as file: content = file.read() # Upload to github git_prefix = 'folder1/' git_file = git_prefix + 'file.txt' if git_file in all_files: contents = repo.get_contents(git_file) repo.update_file(contents.path,"committing files",content,contents.sha,branch="master") print(git_file + ' UPDATED') else: repo.create_file(git_file,branch="master") print(git_file + ' CREATED') 循环显示9个不同的图像。

但是，它们没有显示。如果我没有任何循环显示它，那就行了。

我正在提取正确的资源，但仍然不会显示。

这是我的代码：

v-for

现在我得到的结果是：

这是我的<img class="list-complete-img" src="../assets/g1.jpg" alt="" /> //This works <div v-for="item in data.items" :key="item.id"> <div> {{ item.src }} // Just to check if I am printing right </div> <img class="list-complete-img" :src="item.src" :alt="item.src" /> // This does not work </div> ：

data.json

---

编辑

到目前为止，我已经观察到问题出在 "items": [ { "id": "1","src": "../assets/g1.jpg","tags": ["all","tag1"] },{ "id": "2","src": "../assets/g2.png","tag2"] },{ "id": "3","src": "../assets/g3.png",{ "id": "4","src": "../assets/g4.png",{ "id": "5","src": "../assets/g5.png",{ "id": "6","src": "../assets/g6.png",{ "id": "7","src": "../assets/g7.jpg",{ "id": "8","src": "../assets/g8.png",{ "id": "9","src": "../assets/g9.png","tag2"] } ] 上。如果我使用图像链接，则可以正常工作。但是，不是使用本地图像（仅当我循环使用一堆本地图像并且可以在单个环境中正常工作时）。因此，我能做的就是在这里放置文件目录。我建议大家是否可以尝试在本地计算机上尝试循环从文件目录中上传图片并将其发布在这里。

---

已解决

它完全需要以下语句：src，路径目录和图像名称。

require

解决方法

此问题与以下here的Evan You报价有关：

由于imagePath仅在运行时由Vue呈现，因此Webpack无法重写它。

您的JavaScript代码必须是这样的：

export default {
  name: "App",data: function () {
    return {
      items: [
        { id: "1",src: "logo.png",tags: ["all","tag1"] },{ id: "2","tag2"] },{ id: "3",{ id: "4",{ id: "5",{ id: "6",{ id: "7",{ id: "8",{ id: "9",],};
  },methods: {
    getImgUrl: function (imagePath) {
      return require('@/assets/' + imagePath);
    }
  }
};

然后，您需要通过传递文件名来调用getImgUrl函数。您的HTML将如下所示：

<div id="app">
  <img class="list-complete-img" src="./assets/logo.png" />
  <div v-for="item in items" :key="item.id">
    <img class="list-complete-img" :src="getImgUrl(item.src)" />
  </div>
</div>

由于我无权访问您的图片，因此我自由使用Vue徽标作为图片。

总而言之，Vue编译时，上述问题必须解决，它将所有资产都放入并将其放置在另一个文件夹中，如下图所示：

遵循此模式，您的示例也将起作用。享受吧！

编辑：如果需要，可以将静态资产放置在公用文件夹中。这样，您将能够为资产编写静态路径。

,

尝试：GridView.builder( physics: NeverScrollableScrollPhysics(),padding: const EdgeInsets.all(10),itemCount: stuff.all.length,itemBuilder: (ctx,i) => ChangeNotifierProvider.value( value: stuff.all[i],key: UniqueKey(),child: StuffCard(i,stuff.all[i],stuff),),gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3,crossAxisSpacing: 10,mainAxisSpacing: 10,

,

要使用动态图像，请使用require（）。更改此设置。

<div id="app">
    <div v-for="item in data.items" :key="item.id">
        <img ... :src="require(item.src)" />
    </div>
</div>

,

您可以使用for循环，如果我错了，这可能会帮助纠正我