标签: urlloader

我一直在试图弄清楚如何通过React和Webpack动态添加图像.我在src/images下有一个图像文件夹, 在src/components/index下有一个组件.我正在使用url-loader和webpack的以下配置

    {
      test: /\.(png|jpg|)$/,
      loader: 'url-loader?limit=200000'
    }

在我知道的组件中,我可以在创建组件之前为文件顶部的特定图像添加require(image_path),但是我想让组件成为通用的,并让它获取一个属性,其中包含从中传递的图像的路径父组件.

我试过的是:

<img src={require(this.props.img)} />

对于实际属性,我已经尝试了几乎所有我能想到的项目根目录,反应应用程序根目录和组件本身的路径.

文件系统

|-- src
|   ` app.js
|   `--images
|      ` image.jpg
|      ` image.jpg
|   `-- components
|      `parent_component.js
|      `child_component.js

父组件基本上只是一个容纳孩子倍数的容器,所以......

<ChildComponent img=data.img1 />
<ChildComponent img=data.img2 />
etc....

是否有任何方法可以使用react和webpack与url-loader进行此操作,或者我只是走错路来接近这个？

我想弄清楚url-loader和file-loader之间的区别.什么DataURl意思？

url-loader的工作方式与文件加载器类似,但如果文件小于字节限制,则可以返回DataURL.

我有两个文件:

• ./img/mypic.png
• ./js/help/targets/target.js

在target.js中:

<img src={require("../../../img/target.png")} />

使用webpack.config.js:

 14   module: {
 15     loaders: [
 16       { test: /\.js$/, loader: 'jsx-loader?harmony' },
 17       { test: /\.css$/, loader: 'style-loader!css-loader' },
 18       { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url-loader?limit=8192' },

将图像编译成./[hash].png.

现在,我使用react-router,所以我在/help/targets/target和webpack给图像这个路径/help/targets/[hash].png,其中哈希是一个sha1和.我更愿意,如果它给它的路径/[hash].png.只是

如何使webpack了解对于这个js文件,图像的文件路径是否与浏览器中的相同？

我无法在headercomponent.ts中导入图像.我怀疑这是因为我在编译ts(使用webpack ts loader)时出错了,因为同样的事情与react(其中组件是用es6编写的)一起工作

错误位置是

//headercomponent.ts
import {Component, View} from "angular2/core";
import {ROUTER_DIRECTIVES, Router} from "angular2/router";
import {AuthService} from "../../services/auth/auth.service";
import logoSource from "../../images/logo.png"; //**THIS CAUSES ERROR**  Cannot find module '../../images/logo.png'

@Component({
    selector: 'my-header',
    //templateUrl:'components/header/header.tmpl.html' ,
    template: `<header class="main-header">
  <div class="top-bar">
    <div class="top-bar-title">
      <a href="/"><img src="{{logoSource}}"></a>
    </div>

我的webpack配置是

// webpack.config.js
'use strict';

var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var basePath = path.join(__dirname,'public');
//const TARGET = process.env.npm_lifecycle_event;
console.log("bp " + basePath)
module.exports …

有没有办法在使用Flash/Flex时从HTTP结果访问响应头URLLoader？

可以设置请求标头,访问响应代码也是如此,但是获得实际响应标头似乎显然缺乏...

具体来说,我想得到一个Last-Modified响应头.

我正在使用webpack的url-loader插件并将其配置为:

{
    test: /\.(ttf|eot|woff|woff2|svg)$/,
    loader: "url-loader?limit=50000"
}

它将文件> 50k输出到文件系统,但我找不到如何设置目标路径.

在这种情况下,我希望将文件存储到./fonts根而不是根目录.

我在Webpack中遇到了关于相对路径的问题.让我试着解释一下这个场景:

我在Workspace目录中有2个单独的项目:

1. Project-A [使用Gulp捆绑]:稳定和工作
2. Project-B [使用Webpack捆绑]:新项目

由于两个项目都使用相同的样式,所以我想将项目A的SCSS文件[由标准变量,预定义布局,模态,类等组成]重用到项目B中.

现在,如果我尝试在Project-B index.scss中导入Project-A index.scss作为另一部分[ 注释掉背景图像URL依赖性 ],webpack能够生成所需的CSS输出文件.

// Import Project A SCSS [Common Varibles, Classes, Styling etc] 
@import "../../../../Project_A/assets/stylesheets/index";

但是,由于Project-A的index.scss进一步引用了相应Relative-Path的背景图像,因此webpack构建会抛出错误

'在XYZ/Project-B/Source/Stylesheets中找不到文件/目录'.

确切的错误块:

./src/assets/stylesheets/index.scss中的错误模块构建失败:ModuleNotFoundError:找不到模块:错误:无法解析'file'或'diWorkSpace\Project_B\src\assets\stylesheets

截图:

我无法理解为什么Webpack无法解决Project-A中的资产的相对路径并且仍在查看"项目B"内部.

以下是模拟问题的Code-Repo URL:https: //github.com/raviroshan/webpack-build-issue/tree/master/WorkSpace

重现步骤.

1. 下载回购.
2. 在Project_B文件夹中浏览,然后进行NPM安装.
3. 运行'webpack'.当相对图像URL代码被注释掉时,它将正确构建.
4. 现在放回注释的代码行:https: //github.com/raviroshan/webpack-build-issue/blob/master/WorkSpace/Project_A/assets/stylesheets/index.scss#L27

我正在开发Flash中的图像上传器.我使用FileReference.browse浏览图像,然后将此图像调整为1000 x 1000像素,如果图像非常大,然后上传到服务器.我想显示图像上传进度的进度条.

我使用URLLoader来发送已调整大小的图像的二进制数据,但URLLoader上的ProgressEvent不能按预期的方式工作.仅在图像上传完成后才会触发,而不是显示中间进度.FileReference上的ProgressEvent完美地显示中间图像上载进度.

有没有办法使用URLLoader显示上传进度？要么

我们可以使用FileReference加载修改后的图像,然后调用FileReference.upload,这样就可以显示实际的进度条.

更新1:
但我的问题是我在使用FileReference.browse后调整浏览后的图像,我想上传调整后的图像,而不是浏览后FileReference对象中的原始图片.在这种情况下如何使用Filereference.upload？Filereference.upload将上传原始图像而不是已调整大小的图像.任何想法,如何将调整大小的图像放入Filereference对象,然后使用FileReference.upload.

更新2:
无法在虚拟FileReference中设置数据,数据是只读属性.

更新3:
但是从上面的链接出现同样的问题:无法显示图片上传进度:

"不幸的是,获取进度事件存在问题.我们无法在向服务器发送数据时显示任何进展,因为闪存不支持它"

我正在寻找上述问题的解决方案.URLLoader可以正常发布图像数据.

我正在使用URLLoader将一些键/值对发送到php脚本,然后将其转换为电子邮件,发送(或不发送),然后使用响应回显字符串.

起初它工作正常.URLLoader发布,一分钟后我收到了我的电子邮件,但由于某种原因,我没有得到我的回复.事实上,我的COMPLETE事件似乎根本没有发生.这让我感到困惑,因为如果我收到我的电子邮件,我知道我必须正确发送所有内容.这是我的代码:

public class Mailman{
    public static const METHOD:String = URLRequestMethod.POST;
    public static const ACTION:String = "mailer.php";

    public static var myLoader:URLLoader = new URLLoader();

    private static function onMessageProgress(e:Event){
        var L:URLLoader = e.target as URLLoader;
        Output.trace("PROGRESS: "+L.bytesLoaded+"/"+L.bytesTotal);
        for(var k in L){
            Output.trace("   "+k+": "+L[k]);
        }
    }

    private static function onOpen(e:Event){
        Output.trace("Connection opened");
    }

    private static function onComplete(e:Event){
        Output.trace("Complete!");
    }

    private static function onStatusChange(e:HTTPStatusEvent){
        Output.trace("Status Changed to "+e.status);
    }

    private static function onMessageFail(e:Event){
        PanelManager.alert("ERROR: Could not send your request. Please try again …

我有以下Webpack配置(粗略地,它已经简化为这篇文章):

const rootPublic = path.resolve('./public');
const LOCAL_IDENT_NAME = 'localIdentName=[name]_[local]_[hash:base64:5]';
const CSS_LOADER = `css?sourceMap&${LOCAL_IDENT_NAME}&root=${rootPublic}`;
const SASS_LOADER = 'sass?sourceMap&includePaths[]=' + path.resolve(__dirname, './src/styles');

// ... loaders:

loaders: [
  {
    test: /\.(jpe?g|png|gif|svg)$/,
    loader: 'url-loader?limit=10000&name=[path][name].[ext]'
  },
  {
    test: /\.scss$/,
    loader: config.DEVELOPMENT_MODE ? `style!${CSS_LOADER}!autoprefixer!${SASS_LOADER}`
                : ExtractTextPlugin.extract('style', `${CSS_LOADER}!autoprefixer!${SASS_LOADER}`)
  }, // ...
]

现在这对于scss文件中正常引用的图像非常适用:

.some-static-class {
  background: url('/images/bg.png');
}

但是,它并没有使用时,工作:local指令:

:local .SomeClass {
  background: url('/images/bg.png');
}

而且我认为那是因为root为CSS加载器定义的.我收到一个构建错误:Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../images/bg.gif

如果我root从css-loader配置中删除,那么它构建正常但在Chrome的检查器中路径"看起来"正确,但是当你在新选项卡中实际打开链接时,它指向:chrome-devtools://devtools/bundled/"/images/bg.png"显然无法正确解析. …