vue项目中的图片路径动态绑定问题

最新推荐文章于 2024-08-04 21:17:54 发布

原创最新推荐文章于 2024-08-04 21:17:54 发布 · 1.4k 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍在Vue项目中如何正确地动态加载图片资源，包括使用require语法动态引入图片、解决图片加载失败的问题，以及推荐的几种图片加载策略。

动态绑定

在data中引入的时候，必须使用require

{
    icon: require('@/assets/images/modules-a5.png'),
    text: '图片',
    type: 'ui-picture'
}

或者

{
    icon: require('../../assets/images/modules-picture.png'),
    text: '图片',
    type: 'ui-picture'
}

使用的时候
<img class="header-banner-img" :src="value.icon" alt="" srcset="" />

background: url(../../assets/images/entry-icon.png) 0 0 no-repeat;

<img src="@/assets/images/a-1.png" alt="">或
<img src="../../assets/images/a-1.png" alt="">

如果你使用动态引入的方式，图片出不来，可以按照如下方式解决
1.如果是Vue-cli3的项目，可以在public中新建一个文件夹image，然后在项目中

{
       title: "1",
       src: "/image/4.jpg" 
}

2.把图片放在cdn上，把网络地址存在imgUrl里，然后直接去展示。
3.图片放在assets文件夹，然后在data里面require进图片