如何通过vue中的父组件将img标记的src属性传递给子组件。

Question

我有一个父组件和一个子组件，我希望通过defineProps将一个src属性传递给子组件，以使它显示图像。

下面是我的父组件代码：

<script setup>
import item from "./item.vue";
const items=[
  {
    id:0,
    img:'../assets/2.png',
    name:'秘塔写作猫',
    des:'码文章必备工具'
  },
  {
    id:1,
    img:'../assets/2.png',
    name:'AdblockPlus广告拦截',
    des:'最流行的广告拦截拓展程序'
  },
  {
    id:2,
    img:'../assets/3.png',
    name:'Tampermonkey油猴脚本',
    des:'码文章必备工具'
  },
  {
    id:3,
    img:'../assets/4.png',
    name:'蔚蓝主页',
    des:'个性化简洁风格浏览器主页'
  },
  {
    id:4,
    img:'../assets/5.png',
    name:'ABCD PDF',
    des:'完全免费在线PDF压缩转换工具'
  },
  {
    id:5,
    img:'../assets/6.png',
    name:'ASO谷歌商店工具',
    des:'洞悉竞品下载、评论等核心数据'
  },
]
</script>

<template>
  <div id="ain">
    <div id="head">
      <h4>站长推荐</h4>
      <a>查看全部</a>
    </div>
    <div id="body">
      <item v-for="item in items" :key="item.id"  :img="item.img" :name="item.name" :des="item.des">
      </item>  
    </div>
  </div>
</template>

下面是我的子组件代码：

<script setup>
  defineProps(['img','name','des'])
</script>

<template>
  <div id="item">
    <div>
        <img src="img">
        <p>{{name}}</p> 
        <p id="detail">{{des}}</p>
    </div>
  </div>
</template>

此错误显示在控制台中:获取http://127.0.0.1:5173/assets/2.png 404 (未找到)

我认为这是一个传递参数的问题，但我不知道如何修改它，谢谢大家。

Answer 1

有两种解决方案1.您可以使用绝对路径2.将图像放在根目录下的公共路径中

Answer 2

看起来您正在使用Vite，并且有几个选项可以引用图像：

1. 对图像使用导入语句来获取图像URL

import imgUrl from './assets/img.png'
document.getElementById('hero-img').src = imgUrl

1. 使用/将图像放置在public文件夹和引用中。例如，如果所有图像都包含在/img.

中，则URL将为public/img

1. new URL(url, import.meta.url)虽然这不适用于SSR

如果这些图像不被更新，数字2)可能是最简单的。

参考资料：https://vitejs.dev/guide/assets.html