vue 图片路径 “@/assets“ 报错问题及解决

下面是关于"vue 图片路径 "@/assets" 报错问题及解决"的完整攻略。

问题描述

在使用 Vue 开发项目的过程中，经常会遇到图片引入地址的问题。有时候我们会在组件中使用"@"代表了"src/assets"文件夹路径，但在使用时会出现图片无法加载的情况。

问题原因

这个问题的原因是因为在Vue中使用~src/assets/filename.jpg这种方式来引用图片。其中“~”指的是"src"路径的别名，这个别名在 webpack 的配置文件中指定。而在vue-cli 3.X 中，该别名已经默认为“@”。

解决方法

方法1：使用require

首先，我们可以使用 require 来引入图片，代码如下：

<template>
  <div>
    <img :src="imgUrl" alt="图片">
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgUrl: require('@/assets/test.png') // Require the image from assets and it will return the path
    }
  }
}
</script>

在这种情况下，在模板中使用动态绑定的 src 属性来添加图片路径。

方法2：使用import

使用import来引入图片，代码如下：

<template>
  <div>
    <img :src="imgUrl" alt="图片">
  </div>
</template>

<script>
import testImg from '@/assets/test.png'

export default {
  data () {
    return {
      imgUrl: testImg
    }
  }
}
</script>

方法3：配置webpack

如果以上两种方法都不能解决问题，那么我们可以尝试在 webpack 配置文件中进行更改。步骤如下：

首先，打开vue.config.js文件，添加下面的代码：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': '/src' // 把默认路径改为 src
      }
    }
  }
}

接下来，在组件中使用"@"路径，如下所示：

<template>
  <div>
    <img :src="imgUrl" alt="图片">
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgUrl: '@/assets/test.png'
    }
  }
}
</script>

这样，就可以在组件中使用"@"路径了。

总结

以上就是关于 vue 中图片路径 "@/assets" 报错问题及解决的完整攻略。在使用 Vue 开发时，为了方便，我们经常使用"@"来代表 src/assets 路径，但是在使用时，要特别注意避免出现路径引用失败的情况。