This topic created in 2085 days ago, the information mentioned may be changed or developed.
目前在学 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
Supplement 1 · Aug 13, 2020
贴一下原作者的链接 ： 地址
我是自己从头开始创建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 Aug 13, 2020
require('static/img/test.jpg')
|
 |
2
css3 OP img: require('static/img/test.jpg' )吗，提示编译失败，this dependency was not found
@qianzhaoy |
 |
3
yamedie Aug 13, 2020
斜杠 static
|
 |
4
imzhaotao Aug 13, 2020
看下 vue.config 里面是不是设置了目录的 alias
|
|
5
css3 OP @yamedie 没有用，一样的，主要问题是，原作者的工程 clone 下来可以直接运行，图片正常，我炒的就不行，可我把相关文件直接替换了还是这样
|
 |
6
dovme Aug 13, 2020
你先用网络图片看一下可不可以，可以的话就应该是路径的问题。还有 div 的宽度和高度设置了吗？
|
 |
7
patosky Aug 13, 2020
宽高没给吧。
|
|
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 Aug 13, 2020
你这个写法，应该是 webpack 没有捕获到对图片的依赖，确认下你项目的打包产出结果中是否有这张图片（如果这张图片没有被转成 base64 ）
|
 |
10
sixway Aug 13, 2020
搞不懂为啥要这样引入资源文件？
这样只会让 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 Aug 13, 2020
@css3 static 应该被 clone 到 dist 文件夹里, 估计用不上 require. 你跟三楼说的一样加一个 "/". "/static/img/test.jpg". 试一试. 或者把原作者的仓库贴一下
|
 |
12
azcvcza Aug 13, 2020
不管 VUE 做了啥，打包出来的都是一个 /dist + /css /img /js + index.html 图片路径空白肯定是打包的时候引入不对。
|
 |
13
okampfer Aug 13, 2020
@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 Aug 13, 2020
开发路径和打包路径是不同的,变量的方法是：
``` const img = require('@/static/img/test.jpg') export default{ data () { return { img, } }, } ``` |
|
15
okampfer Aug 13, 2020
@css3 从原项目的 webpack 配置来看，沿用它的启动方式是可行的。
build/webpack.base.conf.js 中，配置了一个 resolve.alias：'@': resolve('src'), 而且也配置了 url-loader 用以加载图片。 所以 import bg from '@/../static/img/test.jpg'; 这种方式是完全可行的。 |
 |
16
yugu9138 Aug 13, 2020
style backgroundImage 都打错怎么做前端？ 语法也错
|
|
17
css3 OP @sixway
@okampfer 很尴尬啊，采用你们方式，报一个奇怪的错： https://gist.github.com/seryte/2b665ce232ef3928f51ca2186b981b76 |
Select Language