vue 使用 backgroundImage 无法显示静态图片是怎么回事？

[css3]

目前在学 vue, 照着一个例子从头创建 vue 工程开始一步一步照着敲，敲到下面这一步，发现死活背景图不显示，clone 原工程，运行进起来一切正常，搞了好几天，我自己的工程，和别人的工程，除了 vue 版本不一样之外（我自己创建的 vue 版本是 2.6.11, 原作者的是 2.5.2 ），其他代码都一样，但我创建的工程的 backgroundImage 的图片就是不显示，而运行作者的，是完全正常的。我运行起来，图片 url 地址显示是白板，贴些关键代码。大佬们帮我看看是哪里有问题了

├── README.md
├── babel.config.js
├── build
├── config
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── static

<div class="Box" :style="{backgroundImage: 'url(' + img + ')'}">


export default {
        data() {
            return {
                img: 'static/img/test.jpg' //图片存放在 static/img 目录下
              }
            }

vue 运行无报错，通过浏览器 f12 查看 该地址返回码 200，但是是空白页

http://localhost:8080/static/img/test.jpg

贴一下原作者的链接 ： 地址

我是自己从头开始创建vue工程，然后一行一行照抄这个里边的代码，遇到的问题就是93行这里，这个图片无法显示

有点注意的是： 作者的启动方式好像是自定义的： "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" 使用 npm run.dev 启动

而我是 vue 默认的启动方式 "serve": "vue-cli-service serve" 使用 npm run serve 启动的

感觉问题就出在这里？

[qianzhaoy]

require('static/img/test.jpg')

[css3]

img: require('static/img/test.jpg' )吗，提示编译失败，this dependency was not found
@qianzhaoy

[yamedie]

斜杠 static

[imzhaotao]

看下 vue.config 里面是不是设置了目录的 alias

[css3]

@yamedie 没有用，一样的，主要问题是，原作者的工程 clone 下来可以直接运行，图片正常，我炒的就不行，可我把相关文件直接替换了还是这样

[dovme]

你先用网络图片看一下可不可以，可以的话就应该是路径的问题。还有 div 的宽度和高度设置了吗？

[patosky]

宽高没给吧。

[css3]

发现了点问题，作者的启动方式好像是自定义的：
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
使用 npm run.dev 启动

而我是 vue 默认的启动方式
"serve": "vue-cli-service serve"
使用 npm run serve 启动的

[egoyau]

你这个写法，应该是 webpack 没有捕获到对图片的依赖，确认下你项目的打包产出结果中是否有这张图片（如果这张图片没有被转成 base64 ）

[sixway]

搞不懂为啥要这样引入资源文件？

这样只会让 Vue cli 无法识别，所以在编译的时候没有。你可试试 npm build 查看编译的文件里面是否有图片文件。

这样或许可以

```
<div class="Box" :style="{backgroundImage: testImg>

import testImg from 'static/img/test.jpg'

export default {
data() {
return {
img: testImg //图片存放在 static/img 目录下
}
}
```

[qianzhaoy]

@css3 static 应该被 clone 到 dist 文件夹里, 估计用不上 require. 你跟三楼说的一样加一个 "/". "/static/img/test.jpg". 试一试. 或者把原作者的仓库贴一下

[azcvcza]

不管 VUE 做了啥，打包出来的都是一个 /dist + /css /img /js + index.html 图片路径空白肯定是打包的时候引入不对。

[okampfer]

@css3 #8
从你的启动方式看，你把原项目 clone 下来后又加了 vue-cli ？

如果是，那在你的 component 里面使用 import bg from '@/../static/img/test.jpg'; 导入图片，然后：

data() {
return {
bg,
}
}

最后在 template 里：

<div class="Box" :style="{ backgroundImage: 'url(' + bg + ')' }">

---

如果你还是想沿用原项目的启动方式（用 webpack-dev-server ），那就跟它的 webpack 配置有关系了。如果方便的话，把原项目的地址贴上来，让大家帮你看看。

---

这个更多的是一个前端工程化的问题，跟你使用的打包工具(webpack)有关，而跟你使用的前端框架(vue/react)没什么关系。本质上就是把图片文件当成 js 模块来 import，然后由 webpack 处理后变成图片的实际路径（打包后图片的路径）。

---

另外建议具体的代码相关问题还是先在 segmentfault 开个帖子，然后再在 V2 开个帖子把 SF 的链接贴过来。SF 里回复可以用 markdown 贴代码，探讨代码问题更方便。

[ccyu220]

开发路径和打包路径是不同的,变量的方法是：

```
const img = require('@/static/img/test.jpg')

export default{
data () {
return {
img,
}
},
}

```

[okampfer]

@css3 从原项目的 webpack 配置来看，沿用它的启动方式是可行的。

build/webpack.base.conf.js 中，配置了一个 resolve.alias：'@': resolve('src'), 而且也配置了 url-loader 用以加载图片。

所以 import bg from '@/../static/img/test.jpg'; 这种方式是完全可行的。

[yugu9138]

style backgroundImage 都打错怎么做前端？ 语法也错

[css3]

@sixway
@okampfer
很尴尬啊，采用你们方式，报一个奇怪的错：

https://gist.github.com/seryte/2b665ce232ef3928f51ca2186b981b76

[sixway]

@css3 #17 照你这个目录来讲

import bg from '../../static/img/headbg05.jpg'

[css3]

@sixway 好的，谢谢，可以了，import bg from 'static/img/headbg05.jpg' 这个是编辑器自动生成的额

[sixway]

@css3 #19 建议你去看一下 ES6 的模块化文档，这已经不是 Vue 的问题了。