vue 引入本地图片不显示

Vue项目中解决本地图片无法显示的问题

最新推荐文章于 2024-05-04 18:29:43 发布

原创最新推荐文章于 2024-05-04 18:29:43 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

3 篇文章

订阅专栏

在Vue项目中，直接使用相对路径引用本地图片会导致页面无法显示。问题源于webpack打包时不处理url路径，未将图片打包进dist目录。解决方法包括：一，将图片导入组件，webpack会自动处理；二，利用import或require动态引入，确保图片被打包。打包后图片会位于dist/public/img目录下。

一般情况我们引入图片方式：
在这里插入图片描述
**

这样传过去的图片地址，在页面无法显示：

**
大致总结了一下原因：是由于webpack打包引起的，没打包之前，图片是在src文件夹的assets文件放置的图片，webpack不会把url路径当成依赖项进行打包，打包后，dist文件夹下并没有assets文件，所以图片加载不出来

解决方案：
先将图片从本地导入到组件中，这样webpack打包时就会把图片当做依赖进行打包，打包后会多一个图片文件夹，从而加载图片

<template>
  <div id="app">
    <header class="header">
      <Top/>
    </header>
    <main class="main">
      <Vavtar :url='img' />
    </main>
    <footer class="footer">
      <Foot/>
      </footer>
  </div>
</template>
<script>
import Top from '@/common/header'
import Foot from '@/common/footer'
import Vavtar from "@/components/Vavtar/index.vue";
import img from "@/assets/logo.png"
export default {
  name:'app',
  
  components:{
    Top, 
    Foot,
    Vavtar
  },
  data(){
    return{
      img,
    }
  }


}
</script>

打包后dist/public目录多了一个img文件
在这里插入图片描述
解决方案二：

<template>
  <div id="app">
    <header class="header">
      <Top/>
    </header>
    <main class="main">
      <Vavtar :url='img' />
    </main>
    <footer class="footer">
      <Foot/>
      </footer>
  </div>
</template>
<script>
import Top from '@/common/header'
import Foot from '@/common/footer'
import Vavtar from "@/components/Vavtar/index.vue";
//import img from "@/assets/logo.png"
export default {
  name:'app',
  
  components:{
    Top, 
    Foot,
    Vavtar
  },
  data(){
    return{
      img:require('@/assets/logo.png')   //  动态引入图片
    }
  }


}
</script>