vue 使用 backgroundImage 无法显示静态图片是怎么回事？
css3 2020-08-13 09:26:05 +08:00 via iPhone 3665 次点击这是一个创建于 1890 天前的主题，其中的信息可能已经有所发展或是发生改变。
目前在学 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 第 1 条附言 2020-08-13 10:58:05 +08:00
贴一下原作者的链接 ： 地址
我是自己从头开始创建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 启动的
感觉问题就出在这里？
 | 1 qianzhaoy 2020-08-13 09:27:23 +08:00 require('static/img/test.jpg') |
 | 2 css3 OP img: require('static/img/test.jpg' )吗，提示编译失败，this dependency was not found @qianzhaoy |
 | 3 yamedie 2020-08-13 09:34:40 +08:00 斜杠 static |
 | 4 imzhaotao 2020-08-13 09:38:39 +08:00 看下 vue.config 里面是不是设置了目录的 alias |
| 5 css3 OP @yamedie 没有用，一样的，主要问题是，原作者的工程 clone 下来可以直接运行，图片正常，我炒的就不行，可我把相关文件直接替换了还是这样 |
 | 6 dovme 2020-08-13 09:46:54 +08:00 你先用网络图片看一下可不可以，可以的话就应该是路径的问题。还有 div 的宽度和高度设置了吗？ |
 | 7 patosky 2020-08-13 09:51:18 +08:00 宽高没给吧。 |
| 8 css3 OP 发现了点问题，作者的启动方式好像是自定义的： "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" 使用 npm run.dev 启动 而我是 vue 默认的启动方式 "serve": "vue-cli-service serve" 使用 npm run serve 启动的 |
 | 9 juzisuan 2020-08-13 09:53:10 +08:00 你这个写法，应该是 webpack 没有捕获到对图片的依赖，确认下你项目的打包产出结果中是否有这张图片（如果这张图片没有被转成 base64 ） |
 | 10 sixway 2020-08-13 10:03:31 +08:00 搞不懂为啥要这样引入资源文件？ 这样只会让 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 目录下 } } ``` |
| 11 qianzhaoy 2020-08-13 10:14:29 +08:00 @css3 static 应该被 clone 到 dist 文件夹里, 估计用不上 require. 你跟三楼说的一样加一个 "/". "/static/img/test.jpg". 试一试. 或者把原作者的仓库贴一下 |
 | 12 azcvcza 2020-08-13 11:04:30 +08:00 不管 VUE 做了啥，打包出来的都是一个 /dist + /css /img /js + index.html 图片路径空白肯定是打包的时候引入不对。 |
 | 13 okampfer 2020-08-13 11:34:10 +08:00 @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 贴代码，探讨代码问题更方便。 |
 | 14 ccyu220 2020-08-13 11:44:03 +08:00 开发路径和打包路径是不同的,变量的方法是： ``` const img = require('@/static/img/test.jpg') export default{ data () { return { img, } }, } ``` |
| 15 okampfer 2020-08-13 11:46:40 +08:00 @css3 从原项目的 webpack 配置来看，沿用它的启动方式是可行的。 build/webpack.base.conf.js 中，配置了一个 resolve.alias：'@': resolve('src'), 而且也配置了 url-loader 用以加载图片。 所以 import bg from '@/../static/img/test.jpg'; 这种方式是完全可行的。 |
 | 16 yugu9138 2020-08-13 17:14:50 +08:00 style backgroundImage 都打错怎么做前端？ 语法也错 |
| 17 css3 OP @sixway @okampfer 很尴尬啊，采用你们方式，报一个奇怪的错： https://gist.github.com/seryte/2b665ce232ef3928f51ca2186b981b76 |
| 18 sixway 2020-08-17 23:32:11 +08:00 |
Select Language