vue 使用 backgroundImage 无法显示静态图片是怎么回事？
css3 · 2020-08-13 09:26:05 +08:00 via iPhone · 3249 次点击这是一个创建于 1573 天前的主题，其中的信息可能已经有所发展或是发生改变。
目前在学 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
egoyau 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