如何在nuxt中使用图片变量

通常来说，我们需要被webpack编译的资源文件放在assets目录下面，不需要构建编译的则放在static目录下。因为nuxt在启动的时候static目录下的文件最终会被映射至根路径下

如下图所示，static目录下的资源文件在被编译过后放到了dist根目录下。assets目录下的文件在被nuxt构建编译后默认会放在dist的_nuxt目录下，这也就是为什么我们直接引用assets下的资源文件会找不到的原因。

那么如何使用static和assets下面的图片呢?

1.static目录下图片使用方法：

图片路径 —— static/1.png

<template>
    <div>
        <!-- 普通使用 -->
        <img src="/1.png" alt="">
        <!-- 动态绑定 -->
        <img :src="staticImg" alt="">
        <div :style="{'background-image':`url(${staticImg})`}"></div>
    </div>
</template>
<script>
export default {
    computed: {
        staticImg() {
            return '/1.png'
        }
    }
}
</script>

2.assets目录下图片的使用方法

图片路径 —— assets/imgs/1.png

<template>
   <div>
        <!-- 普通使用 -->
        <img src="~assets/img/1.png" alt="">
        <!-- 动态绑定 -->
        <img :src="require(`~/assets/img${assetsImg}`)" alt="">
        <!-- 动态绑定：背景图片需要import导入 -->
        <div :style="{'background-image':`url(${assetsBackImg})`}"></div>
   </div>
</template>
<script>
import backImg from '~/assets/img/1-1.png'
export default {
    computed: {
        assetsImg() {
            return '/1.png'
        },
        assetsBackImg() {
            return backImg
        }
    }
}
</script>