资源文件夹中的图像未使用Vue Js显示

rryofs0p  于 2023-04-21  发布在  Vue.js
关注(0)|答案(2)|浏览(269)

我试着在这里寻找不同的答案,但无法解决我的问题。我有一个JSON服务器,其中有一些数据:

file.json
    {
      "post": [
        {
          "id": "1",
          "title": "Title",
          "description": "Este e um post para saberes mais clica aqui",
          "article": "Hoje este e um novo post etc e tal",
          "photo": "image-1.jpg"
        },
        ]
    }

我希望我的组件在v-for中渲染'photo'上的图像,因为我不想每次添加新图像时都硬编码。这是我在组件中的内容。vue:

<template>
  <section>
    <h2 class="mt-32 flex justify-center text-3xl ">The Happy Algorithm</h2>
    <div class="grid grid-rows-4 grid-flow-col">
      <div class="ml-12 " v-for="(post, index) in posts" :key="index">
        <router-link :to="{ name: 'post', params: { id: post.id } }">
          <a href=""
            ><img
              class=" mt-8 pt-32 "
              :src="`../assets/${post.photo}`"
              :alt="post.title"
          /></a>
          <h2>{{ post.title }}</h2>
          <p class="text-justify text-sm pt-6">
            {{ post.description }}
          </p>
        </router-link>
      </div>
    </div>
  </section>
</template>
<script>
import { api } from "@/../services.js";

export default {
  name: "LatestPost",
  props: ["id"],
  data() {
    return {
      posts: [],
    };
  },
  methods: {
    getAllPosts() {
      this.posts = [];
      api.get(`/post`).then(response => {
        this.posts = response.data;
        console.log(this.posts);
      });
    },
  },
  created() {
    this.getAllPosts();
  },
};
</script>

我已经测试过添加一个在线图像,而不是我在我的资产和工程绝对罚款,所以我不知道为什么不工作时,我试图从资产加载图像。
这就是它的显示方式

gojuced7

gojuced71#

看看这个(路径导入)和这个(公共路径)
如果你想动态加载图片(在你使用{{post.photo}}的情况下),你必须将图片移动到你的/path/to/project/public/文件夹中。你可以用下面的方法构建你的src-url:

<img class="mt-8-pt-32" :src="'/' + post.photo" :alt="post.title">

当您的公共路径不同时,请将'/'替换为process.env.BASE_URL

ctehm74n

ctehm74n2#

您还可以在尝试加载图像时使用require函数

:src="require(`../assets/${post.photo}`)"

相关问题